The bar-indicator functions as a semantic alternative to the progress bar. It should display not a progress, but rather a ratio between multiple bar-indicators or something like "passed time" to put some visual perspective between connected bar-indicators.

<dt-bar-indicator value="60"></dt-bar-indicator>

Imports

You have to import the DtBarIndicatorModule to use the dt-bar-indicator:

@NgModule({
  imports: [DtBarIndicatorModule],
})
class MyModule {}

Inputs

Name Type Default Description
align 'start' | 'end' start Alignment of the bar-indicator defining if increasing percentage values let the bar grow to the left or the right.
color 'main' | 'recovered' | 'error' main Current variation of the theme color which is applied to the color of the bar-indicator .
max number 100 Sets the maximum value of the bar-indicator. Inherited from HasProgressValues.
min number 0 Sets the minimum value of the bar-indicator. Inherited from HasProgressValues.
value number - Sets the current value of the bar-indicator. Inherited from HasProgressValues.

Outputs

Name Type Description
valueChange EventEmitter<DtBarIndicatorChange> Event emitted when the value of the bar-indicator cahnges.

Properties

Name Type Description
percent number Returns the percentage value for the current value between min and max. Inherited from HasProgressValues.

Variants

The bar indicator is mostly used within table rows with the table column header as a label. It can also be used as a standalone component, which requires labels next to the bars then. As the bar indicator is not used to show total percentages of a number, but rather to compare ratios, it can't be used as a single, separated bar.
The indicator is themeable and can also show problems.

<dt-bar-indicator value="60" [color]="color"></dt-bar-indicator>
<dt-button-group
  [value]="color"
  (valueChange)="changed($event)"
  style="margin-top: 16px;"
>
  <dt-button-group-item value="main">main</dt-button-group-item>
  <dt-button-group-item value="error">error</dt-button-group-item>
  <dt-button-group-item value="recovered">recovered</dt-button-group-item>
</dt-button-group>

Bar indicator in use

Theming and validation

Depending on the context, the bar-indicator can be colored according to the page's theme or use the validation colors.

<dt-bar-indicator value="60" [color]="color"></dt-bar-indicator>
<dt-button-group
  [value]="color"
  (valueChange)="changed($event)"
  style="margin-top: 16px;"
>
  <dt-button-group-item value="main">main</dt-button-group-item>
  <dt-button-group-item value="error">error</dt-button-group-item>
  <dt-button-group-item value="recovered">recovered</dt-button-group-item>
</dt-button-group>

Alignment

It's possible to set the alignment to end. This is used when a bar-indicator is part of a table row with right-alignment.

<dt-bar-indicator value="30" [align]="alignment"></dt-bar-indicator>
<dt-button-group
  [value]="alignment"
  (valueChange)="changed($event)"
  style="margin-top: 16px;"
>
  <dt-button-group-item value="start">start</dt-button-group-item>
  <dt-button-group-item value="end">end</dt-button-group-item>
</dt-button-group>

Value bindings

Bar-indicator with variable min, max and value bindings.

<dt-bar-indicator
  [value]="value"
  [min]="min"
  [max]="max"
  (valueChange)="changed($event)"
></dt-bar-indicator>
<div style="margin-top: 16px;">
  <button dt-button (click)="value = value - 10">
    decrease value by 10
  </button>
  <button dt-button (click)="value = value + 10">
    increase value by 10
  </button>
</div>
<div style="margin-top: 16px;">
  <button dt-button (click)="min = min - 10">decrease min by 10</button>
  <button dt-button (click)="min = min + 10">increase min by 10</button>
</div>
<div style="margin-top: 16px;">
  <button dt-button (click)="max = max - 10">decrease max by 10</button>
  <button dt-button (click)="max = max + 10">increase max by 10</button>
</div>
<p>
  Current value: {{ value }}
  <br />
  Current min: {{ min }}
  <br />
  Current max: {{ max }}
  <br />
</p>
<p *ngIf="oldValue !== null">
  Event: OldValue: {{ oldValue }}
  <br />
  NewValue: {{ newValue }}
</p>