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

Conversion of storage units to increase readability

expand codeexpand code
Loading...
Default
%
rem

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>
expand codeexpand code
Loading...

Ant Design, a design language for ba...

Truncate the string, ending with the specified string

expand codeexpand code
Loading...
Max [7, 8, 2, 3]
8
Min [7, 8, 2, 3]
2
Sum [7, 8, 2, 3]
20
Avg [7, 8, 2, 3]
5

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

expand codeexpand code
Loading...
NameAgeAddress
John Brown32-
Jim Green42-
Joe Black32Sidney No. 1 Lake Park

Convert Null and Undefined to the specified string

WARNING: Deprecated in v17.0.0, please use the nullish coalescing operator (??) instead, eg:

{{ value ?? '-' }}
expand codeexpand code
Loading...
I am innerHTML

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>
expand codeexpand code
Loading...

 Ant Design 
Ant Design

Strip left and right empty string

expand codeexpand code
Loading...

API#

nzSafeNull#

PropertyDescriptionTypeDefault
replaceReplace characterstring''

nzBytes#

PropertyDescriptionTypeDefault
decimalDecimalnumber'0'
fromUnit of current valuestring'B'
toUnits converted to target valuestring''

nzToCssUnit#

PropertyDescriptionTypeDefault
defaultUnitDefault Unitstring'px'

nzEllipsis#

PropertyDescriptionTypeDefault
lengthTruncate lengthnumber''
suffixReplace characterstring''

nzAggregate#

PropertyDescriptionTypeDefault
methodAggregation'sum' | 'max' | 'min' | 'avg'''

nzSanitizer#

PropertyDescriptionTypeDefault
typesanitizer typestring'html'