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

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
  • 1
  • Convert Null and Undefined to the specified string

    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'