Pipes

NG-ZORRO experiments are features that are released but not yet considered stable or production ready
Developers and users can opt-in into these features before they are fully released. But breaking changes may occur with any release.

Common Pipe Collections in Projects

When To Use#

After introducing Pipe, use it like angular's default Pipe

import { NzPipesModule } from 'ng-zorro-antd/pipes';

Examples

200 B
1 kB
1 MB
1 MB
1 GB
1 TB
1024 MB

nzBytes

Conversion of storage units to increase readability

      Loading...

Default

rem

nzToCssUnit

Css unit

Tip: If possible, we prefer to use Angular's built-in syntax, for example:

<div [style.border-radius.px]="1">px</div>
<div [style.border-radius.%]="1">%</div>
<div [style.border-radius.rem]="1">rem</div>

      Loading...

Ant Design, a design language for ba...

nzEllipsis

Truncate the string, ending with the specified string

      Loading...

Max [7, 8, 2, 3]

Min [7, 8, 2, 3]

Sum [7, 8, 2, 3]

Avg [7, 8, 2, 3]

nzAggregate

Sum, Min, Max, Average and other operations on arrays

      Loading...

I am innerHTML

nzSanitizer

Pipe implementation of DomSanitizer

<div [innerHTML]="html | nzSanitizer: 'html'"></div>
<div [style]="style | nzSanitizer: 'style'"></div>
<img [src]="url | nzSanitizer: 'url'" />
<iframe [src]="resourceUrl | nzSanitizer: 'resourceUrl'"></iframe>

      Loading...

 Ant Design

Ant Design

nzTrim

Strip left and right empty string

      Loading...

API#

nzBytes#

Property	Description	Type	Default
`decimal`	Decimal	`number`	'0'
`from`	Unit of current value	`string`	'B'
`to`	Units converted to target value	`string`	''

nzToCssUnit#

Property	Description	Type	Default
`defaultUnit`	Default Unit	`string`	'px'

nzEllipsis#

Property	Description	Type	Default
`length`	Truncate length	`number`	''
`suffix`	Replace character	`string`	''

nzAggregate#

Property	Description	Type	Default
`method`	Aggregation	`'sum' \| 'max' \| 'min' \| 'avg'`	''

nzSanitizer#

Property	Description	Type	Default
`type`	sanitizer type	`string`	'html'