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 }}</p>
<p>PRECISE + outputUnit: {{ exampleValue | dtDuration: 'PRECISE':'s' }}</p>
<p>CUSTOM: {{ 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 |
maxPrecision |
number |
3 | maximum amount of digits to be used |
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 | |
maxPrecision |
number |
3 | maximum amount of digits to be used |
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 |
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 |
maxDecimals |
number |
5 | Max amount of decimals |
Examples
<dt-form-field>
<dt-label>Value to be transformed</dt-label>
<input dtInput [(ngModel)]="exampleValue" />
</dt-form-field>
<p>DEFAULT: {{ exampleValue | dtDuration }}</p>
<p>PRECISE + outputUnit: {{ exampleValue | dtDuration: 'PRECISE':'s' }}</p>
<p>CUSTOM: {{ 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.