Pipes

Common Pipe Collections.
Import
Source components/pipes
Docs Edit this page

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.

When To Use#

After importing Pipe, use it like Angular's built-in Pipe

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]
8
Min [7, 8, 2, 3]
2
Sum [7, 8, 2, 3]
20
Avg [7, 8, 2, 3]
5
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#

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'