Skip to content
Murhaf Sousli edited this page Jul 11, 2024 · 7 revisions

NgProgress Component

Here are the options (inputs, outputs, functions) that you can use with <ng-progress> component

<ng-progress [direction]="'ltr+'" [min]="20" [max]="1" [speed]="200"  [trickleSpeed]="300"
             [spinner]="true" [spinnerPosition]="'left'" [thick]="false" [meteor]="true"
             [color]="'red'" [ease]="'linear'" [fixed]="true"
             (started)="onStarted()" (complete)="onComplete()"/>
Name Default Description
[id] root Progress bar ID (used for multiple progress bars).
[direction] ltr+ Progress bar direction (ltr+, ltr-, rtl+, rtl-).
[trickleSpeed] 300 Progress trickling speed in ms.
[trickleFunc] Function A function that returns the trickling amount.
[debounceTime] 0 Debounce time before starting the progress bar in ms.
[speed] 200 Transition speed in ms.
[min] 8 Progress initial starting value.
[max] 100 Progress maximum value.
[ease] linear Progress ease function.
[spinner] true Display spinner.
[spinnerPosition] right Spinner position. (right, left).
[color] #1B95E0 Progress bar color.
[thick] false A thicker size of the progress bar.
[fixed] true Progress bar fixed position.
[meteor] true Meteor style.
(started) - Stream that emits when the progress bar has started.
(completed) - Stream that emits when the progress bar has completed.
start() - Starts the progress bar.
set(n) - Sets a percentage n (where n is between 0-100).
inc(n) - Increments by n (where n is between 0-100).
complete() - Completes the progress bar.
isStarted - Checks if the progress has started.
progress - NgProgressRef instance of the progress bar.

NgProgressRef Class

This class is responsible for increasing the progress value, you probably have no use for it unless you want to integrate it with your custom progress bar component, see the Integration Section

Name Description
NgProgressRef.state Stream that emits when progress has changed.
NgProgressRef.started Stream that emits when the progress has started.
NgProgressRef.completed Stream that emits when the progress has completed.
NgProgressRef.isStarted Checks if the progress has started.
NgProgressRef.start() Starts the progress.
NgProgressRef.set(n) Sets a percentage n (where n is between 0-100).
NgProgressRef.inc(n) Increments by n (where n is between 0-100).
NgProgressRef.complete() Completes the progress.
NgProgressRef.destroy() Deletes the progressRef instance.
NgProgressRef.setConfig(config) Sets the progress bar config.

NgProgress Service

This service is used to get any progress bar(s) instance NgProgressRef in your app

Name Description
NgProgress.destroyAll() Destroys all existing NgProgressRef instances.
NgProgress.ref(id?) Returns NgProgressRef instance by id.

You don't have to specify the id parameter unless you are using more than one progress bar