Introduction to angular pipe


PIPE, translated as pipeline.AngularA pipeline is a way to write a display value transformation that can be declared in an HTML component.AngularBefore the pipeAngularJSIs called a filter fromAngular 2It was called a pipe from the beginning. The pipeline takes data as input and converts it to the desired output.

Angular PipesTake integer, string, array and date as input, and use|Separate, and then convert to format as needed and display it in the browser. In interpolation expressions, you can define a pipe and use it as appropriateAngularMany types of pipes can be used in applications.

Built in pipeline

  • String -> String

    • UpperCasePipe
    • LowerCasePipe
    • TitleCasePipe
  • Number -> String

    • DecimalPipe
    • PercentPipe
    • CurrencyPipe
  • Object -> String

    • JsonPipe
    • DatePipe
  • Tools

    • SlicePipe
    • AsyncPipe
    • I18nPluralPipe
    • I18nSelectPipe

usage method

Uppercase conversion

  <p ngNonBindable>{{ 'Angular' | uppercase }}</p>
  <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->

Date formatting

  <p ngNonBindable>{{ today | date: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!--  Output: subject to the current time, output format: 10:40 am -- >

Numeric formatting

  <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p>
  <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->

JavaScript object serialization

  <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
  <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->

Pipeline parameters

A pipe can receive any number of parameters by adding after the pipe name : And parameter values. as number: '1.4-4' , if multiple parameters need to be passed, the parameters are separated by colons. Specific examples are as follows:

  <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
  <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->

Pipe chain

Multiple pipelines can be connected together to form a pipeline chain to process data.

  <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
  <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p>

Custom pipe

The following explains the steps of customizing the pipeline by taking the pipeline used in previous projects as an example:

  • use@PipeDecorator definitionPipeYesmetadataInformation, such asPipeName of – i.enameattribute
  • realizationPipeTransformDefined in the interfacetransformmethod


import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "formatError" })
export class FormatErrorPipe implements PipeTransform {
    constructor() {}

    transform(value: any, module: string) {
        if (value.code) {
            return value.desc;
        } else {
            return value.message;


<div *ngIf="errorMessage">
    <div class="message-box error mb-16" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
        {{errorMessage.error | formatError:"auth"}}


Recommended Today

A detailed explanation of the differences between Perl and strawberry Perl and ActivePerl

Perl is the abbreviation of practical extraction and report language “practical report extraction language”. Application of activestateperl and strawberry PERL on Windows platformcompiler。 Perl   The relationship between the latter two is that C language and Linux system have their own GCC. The biggest difference between activestate Perl and strawberry Perl is that strawberry Perl […]