API reference
Headless progress bar exposes one semantic root directive and one structural indicator directive. Range clamping and ARIA values live on the root.
Root directive
tngProgressBar adds role="progressbar", stable slot metadata, and normalized range attributes to your own element.
Root usage
html
<div tngProgressBar aria-label="Upload progress" [min]="0" [max]="100" [value]="68" #progress="tngProgressBar" class="progress-track">
<span tngProgressBarIndicator [style.width.%]="progress.percent()" class="progress-indicator"></span>
</div>
| Input | Type | Default | Notes |
|---|---|---|---|
min | number | 0 | Lower bound for determinate values. |
max | number | 100 | Upper bound, normalized so it never falls below min. |
value | number | 0 | Determinate value, clamped between min and max. |
indeterminate | boolean | false | Suppresses the value ARIA attributes and marks the root with data-indeterminate. |
Indicator directive
tngProgressBarIndicator adds the stable indicator slot and automatically mirrors the owning root's data-state and data-indeterminate hooks. Width and animation remain in your hands.
Indicator usage
html
<div tngProgressBar [indeterminate]="true" aria-label="Preparing release" class="progress-track">
<span tngProgressBarIndicator class="progress-indicator progress-indicator--indeterminate"></span>
</div>
| Directive | Selector | Data slot | Purpose |
|---|---|---|---|
TngProgressBar | [tngProgressBar] | progress-bar | Semantic root for the linear progress range. |
TngProgressBarIndicator | [tngProgressBarIndicator] | progress-bar-indicator | Visual fill element inside the owner-authored track. |
Accessibility contract
- The root always exposes
role="progressbar". - Determinate mode sets
aria-valuemin,aria-valuemax, andaria-valuenow. - Indeterminate mode removes those value attributes, so provide a clear label through nearby text or
aria-label. - Use
ariaValueTextwhen the numeric value needs a human-readable equivalent. - Because the primitive does not render a label, owners are responsible for visible context and contrast.