Installation

Add and import the module into your imports section.

Modules

Loading syntax highlighter...

Standalone directives

Loading syntax highlighter...

Anatomy

Directive's set structure.

vacProgressRoot

vacProgressIndicator

Input props

ProgressRoot Attribute Directive

The root directive to build a progressbar. Handles the state and bindings.

Input	Default	Type	Required
value	null	number \| null	false
max	100	number	false

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.

Attribute	Value
data-state	"indeterminate" \| "loading" \| "complete
data-value	Shows value
data-max	Shows max

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.

Loading syntax highlighter...

State API - ProgressStateService

Documentation for the progress state service API.

Variables

Name	Default	Type
value	null	WritableSignal<number \| null>
max	100	WritableSignal<number>
getProgressState	"indeterminate"	Signal<"indeterminate" \| "complete" \| "loading">

Modal

Radio Group