@anguless/angulux/progressbar

progressbar

1 declarations3 demos

import

import { ProgressBarModule } from '@anguless/angulux/progressbar';

Basic

The value property drives the bar, and the label is shown by default.

60%

<div style="width: 100%">    <agl-progressBar [value]="value" /></div>

Indeterminate

Indeterminate mode is for work whose duration is not known.

<div style="width: 100%">    <agl-progressBar mode="indeterminate" [style]="{ height: '6px' }" /></div>

Dynamic

Binding to a signal is enough; the bar follows whatever the value does.

20%

<div style="width: 100%; display: grid; gap: 0.75rem; justify-items: center">    <agl-progressBar [value]="value()" />    <agl-button label="Advance" (onClick)="advance()" /></div>

API

Generated from the committed corpus, which check:corpus holds to the built library.

ProgressBar

componentagl-progressBar, agl-progressbar, agl-progress-bar

ProgressBar is a process status indicator.

Input	Type	Default	Description
value	number \| undefined	not documented	Current value of the progress.
showValue	boolean	not documented	Whether to display the progress bar value.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the element.
valueStyleClass	string \| undefined	not documented	Style class of the value element.
unit	string	not documented	Unit sign appended to the value.
mode	'determinate' \| 'indeterminate'	'determinate'	Defines the mode of the progress
color	string \| undefined	not documented	Color for the background of the progress.

Template slot	Description
<ng-template #content>	Template of the content.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.