Deep understanding of PIPE (pipeline) in Angular

In angular, pipe can be used to process input data, and different pipes have different functions. So how to use pipe specifically? The following article will take you through an in-depth study of PIPE (pipeline) in Angular and see how to use it.

PIPE, translated as pipe. Angular Pipes are a way of writing display value transformations that can be declared in HTML components. Angular Pipes were previously called filters in AngularJS and have been called pipes since Angular 2. Pipes take data as input and transform it into the desired output.

Angular Pipes Takes integers, strings, arrays, and dates as input, separated by |, then converts them into formats as needed and displays them in the browser . In interpolation expressions, you can define a pipe and use it according to the situation. There are many types of pipes that can be used in Angular applications.

【Related tutorial recommendation: "angular tutorial"】

Built-in pipeline

• String -> String

  • UpperCasePipe

  • LowerCasePipe

  • TitleCasePipe

• ##Number -> String

  • DecimalPipe

  • PercentPipe

  • CurrencyPipe

• Object -> String

  • JsonPipe

  ##DatePipe

• Tools
  SlicePipe
  AsyncPipe
  I18nPluralPipe
  I18nSelectPipe

#How to use

Uppercase conversion

<div>
  <p ngNonBindable>{{ &#39;Angular&#39; | uppercase }}</p>
  <p>{{ &#39;Angular&#39; | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

Date formatting

<div>
  <p ngNonBindable>{{ today | date: &#39;shortTime&#39; }}</p>
  <p>{{ today | date: &#39;shortTime&#39; }}</p> <!-- Output: 以当前时间为准，输出格式：10:40 AM -->
</div>

Number formatting

<div>
  <p ngNonBindable>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p>
  <p>{{ 3.14159265 | number: &#39;1.4-4&#39; }}</p> <!-- Output: 3.1416 -->
</div>

JavaScript Object Serialization

<div>
  <p ngNonBindable>{{ { name: &#39;semlinker&#39; } | json }}</p>
  <p>{{ { name: &#39;semlinker&#39; } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

Pipeline Parameters

The pipe can receive any number of parameters. The method of use is to add # after the pipe name. ##: and parameter values. For example,

number: '1.4-4'

, if multiple parameters need to be passed, the parameters should be separated by colons. The specific examples are as follows: <pre class="brush:js;toolbar:false;">&lt;div&gt; &lt;p ngNonBindable&gt;{{ &amp;#39;semlinker&amp;#39; | slice:0:3 }}&lt;/p&gt; &lt;p&gt;{{ &amp;#39;semlinker&amp;#39; | slice:0:3 }}&lt;/p&gt; &lt;!-- Output: sem --&gt; &lt;/div&gt;</pre>Pipeline chain

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

<div>
  <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
  <p>{{ &#39;semlinker&#39; | slice:0:3 | uppercase }}</p>
</div>

Custom pipeline

The following uses pipelines used in past projects as examples to explain the steps of custom pipelines:

Use the

@Pipe

decorator to define the
• metadata

  information of Pipe, such as the name of Pipe - that is, the name attribute Implementation

  PipeTransform
• transform

  method defined in the interface

  Definition

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

Use

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

End~

For more programming-related knowledge, please visit:Programming Teaching ! !

The above is the detailed content of Deep understanding of PIPE (pipeline) in Angular. For more information, please follow other related articles on the PHP Chinese website!