Deep understanding of PIPE (pipeline) in Angular

Inangular, 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.AngularPipes are a way of writing display value transformations that can be declared in HTML components.AngularPipes were previously called filters inAngularJSand have been called pipes sinceAngular 2. Pipes take data as input and transform it into the desired output.

Angular PipesTakes 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 inAngularapplications.

【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

 
{{ 'Angular' | uppercase }}
 
{{ 'Angular' | uppercase }}
  

Date formatting

 
{{ today | date: 'shortTime' }}
 
{{ today | date: 'shortTime' }}
  

Number formatting

 
{{ 3.14159265 | number: '1.4-4' }}
 
{{ 3.14159265 | number: '1.4-4' }}
  

JavaScript Object Serialization

 
{{ { name: 'semlinker' } | json }}
 
{{ { name: 'semlinker' } | json }}
  

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> <p ngNonBindable>{{ &#39;semlinker&#39; | slice:0:3 }}</p> <p>{{ &#39;semlinker&#39; | slice:0:3 }}</p> <!-- Output: sem --> </div>

Pipeline chain

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

 
{{ 'semlinker' | slice:0:3 | uppercase }}
 
{{ 'semlinker' | slice:0:3 | uppercase }}
 

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 ofPipe, such as the name ofPipe- that is, thenameattributeImplementation

  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

 
 {{errorMessage.error | formatError:"auth"}} 
 

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!