Progress

Display an indicator representing the progress of a task.

Import

Import the Progress primitives from ng-primitives/progress.

import {
  NgpProgress,
  NgpProgressTrack,
  NgpProgressLabel,
  NgpProgressValue,
  NgpProgressIndicator,
} from 'ng-primitives/progress';

Usage

Assemble the avatar directives in your template.

<div ngpProgress [ngpProgressValue]="percentage">
  <label ngpProgressLabel></label>
  <span ngpProgressValue></span>

  <div ngpProgressTrack>
    <div ngpProgressIndicator></div>
  </div>
</div>

Reusable Component

Create a reusable component that uses the progress directives.

Schematics

Generate a reusable progress component using the Angular CLI.

ng g ng-primitives:primitive progress

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• component-suffix: The suffix to apply to the generated component class name.
• file-suffix: The suffix to apply to the generated component file name. Defaults to component.
• styles: How component styles should be generated. css (default) includes the full example styles; unstyled omits them entirely so you can style the component yourself.
• example-styles (deprecated): still supported for compatibility - true maps to styles: css, false maps to styles: unstyled.

API Reference

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

NgpProgress

NgpProgressIndicator

NgpProgressTrack

NgpProgressLabel

NgpProgressValue

Accessibility

Adheres to the WAI-ARIA Progressbar pattern.