Introduction to Angular Pipeline PIPE


PIPE, which translates to pipes.AngularPipes are methods for writing display value transformations that can be declared in HTML components.Angularpipe beforeAngularJSis called a filter, fromAngular 2It was called a pipe from the beginning. A pipeline takes data as input and transforms it into the desired output.

Angular PipesTaking integers, strings, arrays and dates as input, use|delimited, then converted to a format as needed and displayed in the browser. In the interpolation expression, you can define the pipeline and use it according to the situation, inAngularThere are many types of pipes that can be used in an application.

Built-in pipeline

  • String -> String

    • UpperCasePipe
    • LowerCasePipe
    • TitleCasePipe
  • Number -> String

    • DecimalPipe
    • PercentPipe
    • CurrencyPipe
  • Object -> String

    • JsonPipe
    • DatePipe
  • Tools

    • SlicePipe
    • AsyncPipe
    • I18nPluralPipe
    • I18nSelectPipe


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: based on the current time, output format: 10:40AM -->

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" } -->

Pipe parameters

A pipeline can receive any number of parameters, by adding it after the pipeline name : and parameter values. like number: '1.4-4' , if you need to pass multiple parameters, separate the parameters with colons. The specific example is 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 pipeline

The following uses the pipeline used in the past project as an example to explain the custom pipeline steps:

  • use@PipeDecorator DefinitionPipeofmetadatainformation such asPipename – i.e.nameAttributes
  • accomplishPipeTransformdefined 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

mybatis source code notes

Table of contents Open and tear MyBatis source code 1. Handwritten persistence layer framework-ipersistent 1.1 JDBC operation database\_problem analysis 1.2 JDBC problem analysis & solution ideas 1.3 Custom Persistence Layer Framework\_Thinking Analysis The difference between using JDBC and using the persistence layer framework: The framework, in addition to thinking about its own engineering design, also […]