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

Pipes

We provide various different pipes for formatting values within your templates. Every pipe has a single responsibility and they can be chained together to achieve combined formats.

Count

The dtCount pipe provides a way to display numbers in common way, abbreviating big numbers and adjusting precision

<dt-form-field>
  <dt-label>Value to be transformed</dt-label>
  <input dtInput [(ngModel)]="exampleValue" />
</dt-form-field>
<p>Default: {{ exampleValue | dtCount }}</p>
<p>With unit: {{ exampleValue | dtCount: 'req.' }}</p>

Percent

The dtPercent pipe provides a way to display percents in common way, adjusting precision

<dt-form-field>
  <dt-label>Value to be transformed</dt-label>
  <input dtInput [(ngModel)]="exampleValue" />
</dt-form-field>
<p>Default: {{ exampleValue | dtPercent }}</p>

Bits

The dtBits pipe provides a way to format numbers as bits

<dt-form-field>
  <dt-label>Value to be transformed</dt-label>
  <input dtInput [(ngModel)]="exampleValue" />
</dt-form-field>
<p>Default: {{ exampleValue | dtBits }}</p>
<p>Factor 1024: {{ exampleValue | dtBits: 1024 }}</p>

Bytes

The dtBytes pipe provides a way to display bytes in automatic units depending on the size of the number. The dtKilobytes pipe provides a way to display bytes as kB The dtMegabytes pipe provides a way to display bytes as MB

<dt-form-field>
  <dt-label>Value to be transformed</dt-label>
  <input dtInput [(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>

Rate

The dtRate pipe provides a way to add a rate info to the value

<dt-form-field>
  <dt-label>Value to be transformed</dt-label>
  <input dtInput [(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>

Duration

The dtDuration pipe provides a way to format an input time to a timestamp

<dt-form-field>
  <dt-label>Value to be transformed</dt-label>
  <input dtInput [(ngModel)]="exampleValue" />
</dt-form-field>
<p>DEFAULT {{ exampleValue | dtDuration }}: {{ exampleValue | dtDuration }}</p>
<p>
  PRECISE + outputUnit {{ exampleValue | dtDuration: 'PRECISE':'s' }}: {{
  exampleValue | dtDuration: 'PRECISE':'s' }}
</p>
<p>
  CUSTOM {{ exampleValue | dtDuration: 5 }}: {{ exampleValue | dtDuration: 5 }}
</p>

Util functions

Since pipes are only used within templates we provide util functions that can be used in typescript as well to apply the correct format to numbers. These functions return DtFormattedValue.

DtFormattedValue stores source values and also contains ready-to-display fields, which are described in a table below:

Name Type Default Description
displayValue string | undefined undefined value to be displayed
displayUnit string | undefined undefined unit representation to be displayed
displayRateUnit string | undefined undefined rate unit representation to be displayed
toString() - method returning formatted combination of displayValue, displayUnit and displayRateUnit

Count

The formatCount function provides a way to format numbers as abbreviations outside the template. The function takes the following parameters:

Name Type Default Description
input DtFormattedValue | number numeric value to be transformed by the pipe
inputUnit DtUnit | string Unit.COUNT input unit, if not default - displayed together with the formatted value; does not yet support plurals and internationalization

Percent

The formatPercent function provides a way to format percents, adjusting precision outside the template. The function takes the following parameters:

Name Type Default Description
input number numeric value to be transformed by the pipe

Bits

The formatBits function provides a way to format the input as bits. You can adjust the factor used and specify the unit the input is defined in. Optional options for the function can be passed as a DtNumberFormaterOption. The options passed are internally merged with default options. The function takes the following parameters:

Name Type Default Description
input DtFormattedValue | number numeric value to be transformed by the pipe
options DtNumberFormatterOption options for the util function

You can specify the following properties on your options:

Name Type Default Description
factor number 1000 determines whether to use KILO (default) or KIBI multiplier in calculations; does not affect displayed unit
inputUnit DtUnit DtUnit.Bits input unit, typically defined unit of type DtUnit (DtUnit.BITS by default)
outputUnit DtUnit defines the unit used in the output. e.g. if you pass 10 000 000 bits and choose kilobits as the outputUnit - 10 000 kbits

Bytes

For bytes we provide the formatBytes function to format the input as bytes. You can adjust the factor used and specify the unit the input is defined in. Optional options for the function can be passed as a DtNumberFormaterOption. The options passed are internally merged with default options. The function takes the following parameters:

Name Type Default Description
input DtFormattedValue | number numeric value to be transformed by the pipe
factor number determines whether to use KILO (default) or KIBI multiplier in calculations; does not affect displayed unit
inputUnit DtUnit input unit, typically defined unit of type DtUnit (DtUnit.BYTES by default)

You can specify the following properties on your options:

Name Type Default Description
factor number 1000 determines whether to use KILO (default) or KIBI multiplier in calculations; does not affect displayed unit
inputUnit DtUnit DtUnit.BYTES input unit, typically defined unit of type DtUnit (DtUnit.BYTES by default)
outputUnit DtUnit defines the unit used in the output. e.g. if you pass 10 000 000 bytes and choose kilobytes as the outputUnit - 10 000 kbits

Rate

The formatRate function enables you to format a number or a FormattedValue from a previous pipe with a rate. The function takes the following parameters:

Name Type Default Description
input DtFormattedValue | number numeric value to be transformed by the pipe
rateUnit DtRateUnit | string rate unit

Time (deprecated - Will be removed with version 7.0.0)

The formatTime function converts a number to a timestamp. Default behaviour will print the first available value/unit and only the next two descending steps. Optionally you can set the input unit and which unit you want to set as the lower limit.

Name Type Default Description
input number ms numeric value to be transformed by the pipe
inputUnit DtTimeUnit undefined Which timeunit is used for the input
toUnit DtTimeUnit undefined Which timeunit is the smallest possible output (Pipe disregards toUnit when unit is bigger than the inputUnit)

Duration

The formatDuration function converts a number to a duration string and consumes a formatMethod which configures how the output is built.

  • 'DEFAULT': will look for the first unit that has a value and will only print the next two descending units as long as they have values. The results for each time unit will be rounded to a decimal number.
  • 'PRECISE': will only print the unit that it consumed or was set as the outputUnit. The output value can be real numbers. (e.g. 1.54 s)
  • Custom/Number(1-n): will tell the formatter to print a custom amount of units.

You can specify the following properties on your options:

Name Type Default Description
input number Numeric value to be transformed
formatMethod 'DEFAULT | 'PRECISE' | number 'DEFAULT' Formatting/Precision mode configuring the output
outputUnit DtTimeUnit undefined Which unit to transform the input to
inputUnit DtTimeUnit Milliseconds Which timeunit is used for the input

Examples

<dt-form-field>
  <dt-label>Value to be transformed</dt-label>
  <input dtInput [(ngModel)]="exampleValue" />
</dt-form-field>
<p>DEFAULT {{ exampleValue | dtDuration }}: {{ exampleValue | dtDuration }}</p>
<p>
  PRECISE + outputUnit {{ exampleValue | dtDuration: 'PRECISE':'s' }}: {{
  exampleValue | dtDuration: 'PRECISE':'s' }}
</p>
<p>
  CUSTOM {{ exampleValue | dtDuration: 5 }}: {{ exampleValue | dtDuration: 5 }}
</p>

Special uses (e.g. infographics, tiles)

It is possible to display (and style) value and unit separately - just use appropriate formatter util function that would return DtFormattedValue. You can either call toString() method to get simple string or get its displayData which contains ready-to-display fields that can be displayed separately.