Bar-indicator

´ Loading interactive demo...
<dt-bar-indicator value="60"></dt-bar-indicator> export class DefaultBarIndicatorExampleComponent { } export class DefaultBarIndicatorExampleComponent { }

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 a something like "passed time" to put some visual perspective between connected bar-indicators.

A basic bar-indicator would follow this structure:

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

Imports

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

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

Options & Properties

Name Type Default Description
@Input() align 'start' | 'end' 'start Alignment of the bar-indicator defining if increasing percentage values let the bar grow to the left or the right.
@Input() color 'main' | 'recovered' | 'error' main Current variation of the theme color which is applied to the color of the bar-indicator .
@Input() max number 100 Sets the maximum value of the bar-indicator. Inherited from HasProgressValues.
@Input() min number 0 Sets the minimum value of the bar-indicator. Inherited from HasProgressValues.
@Input() value number - Sets the current value of the bar-indicator. Inherited from HasProgressValues.
@Output()EventEmitter<DtBarIndicatorChange> Event emitted when the value of the bar-indicator cahnges.
percentage number Percentage value for the current value between min and max. Inherited from HasProgressValues.

Examples

Bar-indicator set to a fixed value.

´ Loading interactive demo...
<dt-bar-indicator value="60"></dt-bar-indicator> export class DefaultBarIndicatorExampleComponent { } export class DefaultBarIndicatorExampleComponent { }

Bar-indicator in different color variations.

´ Loading interactive demo...
<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> export class ColorBarIndicatorExampleComponent { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } } main error recovered export class ColorBarIndicatorExampleComponent { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } }

Bar-indicator with alignment set to end

´ Loading interactive demo...
<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> export class AlignmentBarIndicatorExampleComponent { alignment = 'end'; changed(alignValue: string): void { this.alignment = alignValue; } } start end export class AlignmentBarIndicatorExampleComponent { alignment = 'end'; changed(alignValue: string): void { this.alignment = alignValue; } }

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

´ Loading interactive demo...
<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> export class DynamicBarIndicatorExampleComponent { min = 0; max = 100; value = 50; oldValue: number | null = null; newValue: number | null = null; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } }

Current value: {{value}}
Current min: {{min}}
Current max: {{max}}

Event: OldValue: {{oldValue}}
NewValue: {{newValue}}

export class DynamicBarIndicatorExampleComponent { min = 0; max = 100; value = 50; oldValue: number | null = null; newValue: number | null = null; changed($event: { oldValue: number; newValue: number }): void { this.oldValue = $event.oldValue; this.newValue = $event.newValue; } }