-
-
Notifications
You must be signed in to change notification settings - Fork 102
Usage (legacy)
Murhaf Sousli edited this page Aug 18, 2024
·
1 revision
Install it with npm
npm i ngx-progressbar
Import NgProgressModule
import { NgProgressModule } from 'ngx-progressbar';
@Component({
selector: 'app-root',
template: `
<ng-progress #progressBar/>
<button (click)="progressBar.start()">Start</button>
<button (click)="progressBar.complete()">Complete</button>
`,
standalone: true,
imports: [NgProgressModule]
})
export class AppComponent {
}
import { NgProgressModule, NgProgressComponent } from 'ngx-progressbar';
@Component({
selector: 'app-home',
template: `
<ng-progress/>
`,
standalone: true,
imports: [NgProgressModule]
})
export class HomeComponent implements AfterViewInit {
@ViewChild(NgProgressComponent) progressBar: NgProgressComponent;
ngAfterViewInit() {
this.progressBar.start();
}
}
import { NgProgressModule, NgProgress, NgProgressRef } from 'ngx-progressbar';
@Component({
selector: 'app-home',
template: `
<ng-progress id="myProgress"/>
`,
standalone: true,
imports: [NgProgressModule]
})
export class HomeComponent {
progressRef: NgProgressRef;
constructor(private progress: NgProgress) {
}
ngOnInit() {
this.progressRef = progress.ref('myProgress');
}
startLoading() {
this.progressRef.start();
}
completeLoading() {
this.progressRef.complete();
}
changeProgressColor() {
this.progressRef.setConfig({ color: 'green' });
}
}
Become a sponsor and get your logo on our README on GitHub and the front page of https://ngx-progressbar.netlify.com/.
Become a backer and get your logo on our README on GitHub.
Older version (v12)
-
Automagic features
Older version (v11)
-
Automagic features