Home > Web Front-end > JS Tutorial > Deep understanding of PIPE (pipeline) in Angular

Deep understanding of PIPE (pipeline) in Angular

青灯夜游
Release: 2021-06-28 11:41:09
forward
4686 people have browsed it

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.

Deep understanding of PIPE (pipeline) in Angular

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>
Copy after login
Date formatting

<div>
  <p ngNonBindable>{{ today | date: &#39;shortTime&#39; }}</p>
  <p>{{ today | date: &#39;shortTime&#39; }}</p> <!-- Output: 以当前时间为准,输出格式:10:40 AM -->
</div>
Copy after login
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>
Copy after login
JavaScript Object Serialization

<div>
  <p ngNonBindable>{{ { name: &#39;semlinker&#39; } | json }}</p>
  <p>{{ { name: &#39;semlinker&#39; } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>
Copy after login
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: <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copy after login</div></div>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>
Copy after login

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;
        }
    }
}
Copy after login

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>
Copy after login

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!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template