Pipes

Custom Angular pipes (filters).

Setup

Import the [CovalentCommonModule] in your NgModule:

{{ covalantCommonTypescript }} Pipes Docs
Digits Conversion

The digits pipe takes a number and converts the output to an appropriate numerical measurement with an optional precision argument.

Digits: {{ log.digits }}

Converted: {{ log.digits | digits }}

With precision argument: {{ log.digits | digits: log.precision }}

Usage:

{{ digitsHtml }}
Byte Conversion

The bytes pipe takes a number and converts the output to an appropriate base 1024 data measurement with an optional precision argument.

Bytes: {{ log.bytes }}

Converted: {{ log.bytes | bytes }}

With precision argument: {{ log.bytes | bytes: log.precision }}

Usage:

{{ bytesHtml }}
Decimal Bytes Conversion

The decimalBytes pipe takes a number and converts the output to an appropriate base 1000 data measurement with an optional precision argument.

Bytes: {{ log.bytes }}

Converted: {{ log.bytes | decimalBytes }}

With precision argument: {{ log.bytes | decimalBytes: log.precision }}

Usage:

{{ decimalByteHtml }}
Time Ago

The timeAgo pipe takes a string, number or Date timestamp (example: 2016-01-29T17:59:59.000Z ) and tranforms it to the amount of time that has gone by.

Timestamp: {{ log.timestamp }} | {{ log.timestamp | timeAgo: log.reference }}

Reference: {{ log.reference }}

Usage:

{{ timeAgoHtml }}
Time Until

The timeUntil pipe takes a string, number or Date timestamp (example: {{ currentTimeStamp }} ) and tranforms it to the amount of time until that timestamp will be reached.

Timestamp: {{ log.expiration_date }} | {{ log.expiration_date | timeUntil: log.reference }}

Reference: {{ log.reference }}

Usage:

{{ timeUntilHtml }}
Time Difference

The timeDifference pipe outputs the difference between two times. Strings, Numbers or Date timestamps are acceptable types. (example: 2016-01-29T17:59:59.000Z ).

Start Time: {{ log.timestamp }} | End Time: {{ log.timestampend }}

Difference: {{ log.timestamp | timeDifference: log.timestampend }}

Difference relative to current time: {{ log.timestamp | timeDifference }}

Note: Using this pipe without arguments outputs the time difference relative to the current time.

Usage:

{{ timeDiffHtml }}
Truncate

The truncate pipe limits a string to a specified length and adds an ellipsis.

Original value: {{ log.text_value }}

Truncate with a length value of {{ log.truncate_length }} : {{ log.text_value | truncate: log.truncate_length ?? 0 }}

Usage:

{{ truncateHtml1 }}

Note: If the last character in a returned output is a space, then that space is removed.

{{ truncateHtml2 }}
Angular Pipes launch Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe