import { Component } from '@angular/core';
import { WrDuration } from 'ngwr/pipes';
@Component({ imports: [WrDuration] })
export class MyComponent {}wrDuration
Show a span of milliseconds as clock digits or as units.
Installation
Import the class. This entry point has no stylesheet.
Clock
The default: hours, minutes and seconds. Under an hour, minutes and seconds.
{{ 5400000 | wrDuration }} <!-- "1:30:00" -->
{{ 307000 | wrDuration }} <!-- "5:07" -->Units
'units' writes every non-zero unit, days included, with the words and the digits of the app locale.
{{ 5400000 | wrDuration: 'units' }} <!-- en: "1 hr 30 min" fr: "1 h 30 min" -->
{{ 307000 | wrDuration: 'units' }} <!-- en: "5 min 7 sec" ru: "5 мин 7 с" -->In TypeScript
wrFormatDuration gives the same text for a row built in code.
import { wrFormatDuration } from 'ngwr/pipes';
wrFormatDuration(5400000, 'en-US'); // "1:30:00"
wrFormatDuration(5400000, 'en-US', 'units'); // "1 hr 30 min"
wrFormatDuration(-307000, 'en-US'); // "-5:07"
wrFormatDuration(null, 'en-US'); // ""Playground
1:30:00
{{ 5400000 | wrDuration }}Customize
Milliseconds
Style
API
| Name | Description | Type | Default |
|---|---|---|---|
wrDuration | Milliseconds as 1:30:00 (5:07 under an hour) or as units. Whole seconds; a negative span takes the minus sign in front. null, undefined, empty and a non-finite value render as an empty string. | (value: number | string | null | undefined, style: WrDurationStyle = 'clock') => string | — |
wrFormatDuration | The pipe as a function, in the locale given. | (value: number | string | null | undefined, locale: string, style: WrDurationStyle = 'clock') => string | — |
WrDurationStyle | clock is digits and colons; units is every non-zero unit as the locale writes it. | 'clock' | 'units' | — |