Progress

Display an indicator representing the progress of a task.

Usage

Assemble the avatar directives in your template.

<div ngpProgress [ngpProgressValue]="percentage">
  <div ngpProgressIndicator [style.width.%]="percentage"></div>
</div>

API Reference

The following directives are available to import from the @ng-primitives/ng-primitives/progress package:

NgpProgressDirective

ngpProgressValue

number

Define the progress value.

ngpProgressMax

number

default:

"100"

Define the progress max value.

ngpProgressValueLabel

(value: number, max: number) => string

Define a function that returns the progress value label.

NgpProgressIndicatorDirective

There are no inputs or outputs for this directive.

Schematics

You can use our schematic to generate a new progress component.

Options

name

string

The name of the component.

project

string

The name of the project to add the component to.

path

string

The path to create the component.