Bar indicator

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

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

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.

´ 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 BarIndicatorColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } } <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 BarIndicatorColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } }

Bar indicator in use

bar-indicator in tables

standalone bar-indicator

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.

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

A basic bar-indicator would follow this structure:

<dt-bar-indicator value="10"></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 Default 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.

Examples

Bar-indicator set to a fixed value.

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

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 BarIndicatorColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } } <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 BarIndicatorColorExample { 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 BarIndicatorAlignmentExample { alignment = 'end'; changed(alignValue: string): void { this.alignment = alignValue; } } <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 BarIndicatorAlignmentExample { 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 BarIndicatorDynamicExample { 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; } } <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 BarIndicatorDynamicExample { 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; } }