Set of directives to build an accessible progress bar.
Installation
Add and import the module into your imports section.
Modules
Standalone directives
Anatomy
Directive's set structure.
<docs-anatomy [node]="componentStructure" />
Input props
ProgressRoot Attribute Directive
The root directive to build a progressbar. Handles the state and bindings.
<docs-table [columns]="columnsInput" [rows]="rootInputRows" />
| Attribute | Value |
|---|---|
| data-state | "indeterminate" | "loading" | "complete |
| data-value | Shows value |
| data-max | Shows max |
ProgressIndicator Attribute Directive
A directive to bind the state and the accessibility rules to the indicator element.
<docs-table [columns]="attributesColumns" [rows]="indicatorAttrRows" />
State
ProgressStateService allows to control the inputs and get the progress state.
Access directive API with exportAS
We can access the state of the progress using a template variable. All the directives expose themself with the same name. We have access to the directive's attributes and also the state service.
Example
We could use it with any other directive. For example with #root="vacProgressRoot" and access the state.
<docs-code [code]="templateVariableExample" language="html" />
State API - ProgressStateService
Documentation for the progress state service API.
Variables
<docs-table [columns]="stateVarsColumns" [rows]="stateRows" />