# wrDuration

> Show a span of milliseconds as clock digits or as units.

Source: https://ngwr.dev/reference/pipes/wr-duration  
Kind: Pipe  
Added in v15.4  
Optional

## Installation

Import the class. This entry point has no stylesheet.

```typescript
import { Component } from '@angular/core';
import { WrDuration } from 'ngwr/pipes';

@Component({ imports: [WrDuration] })
export class MyComponent {}
```

## Clock

The default: hours, minutes and seconds. Under an hour, minutes and seconds.

```angular-html
{{ 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.

```angular-html
{{ 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.

```angular-ts
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

```angular-html
{{ 5400000 | wrDuration }}
```

```angular-ts
import { Component } from '@angular/core';

/**
 * Playground
 */
@Component({
  selector: 'wrduration-playground-example',
  templateUrl: './wrduration-playground-example.html',
})
export class WrdurationPlaygroundExample {}
```

## 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'` | `—` |

## See also

- [wr-statistic-countdown](https://ngwr.dev/reference/components/statistic) — A span that ticks down.
- [wrDate](https://ngwr.dev/reference/pipes/wr-date) — A moment rather than a span.
- [wrNumber](https://ngwr.dev/reference/pipes/wr-number) — Format a number, percent or price in the app locale.