Formatters

Four more details have a look at the format units pattern.

´ Loading interactive demo...
<dt-form-field> <dt-label>Value to be transformed</dt-label> <input dtInput #value [(ngModel)]="exampleValue"/> </dt-form-field> <p>Default: {{ exampleValue | dtPercent }}</p> export class PercentExample { exampleValue: number; } Value to be transformed

Default: {{ exampleValue | dtPercent }}

export class PercentExample { exampleValue: number; }

Variants

Bytes

´ Loading interactive demo...
<dt-form-field> <dt-label>Value to be transformed</dt-label> <input dtInput #value [(ngModel)]="exampleValue"/> </dt-form-field> <p>Default: {{ exampleValue | dtBytes }}</p> <p>Factor 1024: {{ exampleValue | dtBytes: 1024 }}</p> <p>kB: {{ exampleValue | dtKilobytes }}</p> <p>MB: {{ exampleValue | dtMegabytes }}</p> export class BytesExample { exampleValue: number; } Value to be transformed

Default: {{ exampleValue | dtBytes }}

Factor 1024: {{ exampleValue | dtBytes: 1024 }}

kB: {{ exampleValue | dtKilobytes }}

MB: {{ exampleValue | dtMegabytes }}

export class BytesExample { exampleValue: number; }

Bits

´ Loading interactive demo...
<dt-form-field> <dt-label>Value to be transformed</dt-label> <input dtInput #value [(ngModel)]="exampleValue"/> </dt-form-field> <p> Default: {{ exampleValue | dtBits }} </p> <p> Factor 1024: {{ exampleValue | dtBits: 1024 }} </p> export class BitsExample { exampleValue: string; } Value to be transformed

Default: {{ exampleValue | dtBits }}

Factor 1024: {{ exampleValue | dtBits: 1024 }}

export class BitsExample { exampleValue: string; }

Count

´ Loading interactive demo...
<dt-form-field> <dt-label>Value to be transformed</dt-label> <input dtInput #value [(ngModel)]="exampleValue"/> </dt-form-field> <p>Default: {{ exampleValue | dtCount }}</p> <p>With unit: {{ exampleValue | dtCount:'req.' }}</p> export class CountExample { exampleValue: number; } Value to be transformed

Default: {{ exampleValue | dtCount }}

With unit: {{ exampleValue | dtCount:'req.' }}

export class CountExample { exampleValue: number; }

Rate

´ Loading interactive demo...
<dt-form-field> <dt-label>Value to be transformed</dt-label> <input dtInput #value [(ngModel)]="exampleValue"/> </dt-form-field> <p>per request: {{ exampleValue | dtRate:'request' }}</p> <p>per second: {{ exampleValue | dtCount | dtRate:'s' }}</p> <p>Chaining rate + bytes: {{ exampleValue | dtRate:'s' | dtBytes }}</p> <p>Chaining bytes + rate: {{ exampleValue | dtBytes | dtRate:'s' }}</p> export class RateExample { exampleValue: number; rate = DtRateUnit.PER_MILLISECOND; } Value to be transformed

per request: {{ exampleValue | dtRate:'request' }}

per second: {{ exampleValue | dtCount | dtRate:'s' }}

Chaining rate + bytes: {{ exampleValue | dtRate:'s' | dtBytes }}

Chaining bytes + rate: {{ exampleValue | dtBytes | dtRate:'s' }}

export class RateExample { exampleValue: number; rate = DtRateUnit.PER_MILLISECOND; }