About the usage of pipe operator (|) in Angular

Usually we need to use pipes to format data. The following article mainly introduces you to the use of the pipe operator (|) in Angular. The article introduces it in detail through sample code. Friends who need it can For reference, let’s learn with the editor below.

What is a pipeline?

Angular's pipeline can be regarded as a tool for data formatting and display. Pipes can format data for display without changing the source data. For example, regarding the display of dates, you can use Pipeline 1 to display the source data in the form of yyyy/MM/dd, or you can use Pipeline 2 to display it in the form of Feb 28, 2017. But the original data is still date and has not changed. Using pipelines, we can separate the content of data formatting and make it independent. When formatting and display are needed, just select the corresponding pipeline for processing.

1. Template expression operators

The template expression language uses a subset of JavaScript syntax, and adds several additional Special operators for specific scenarios: pipeline operators, safe navigation operators.

2. Pipe operator (|)

The result of the expression may require some conversion before binding. For example, you might want to display numbers as amounts, force text to be uppercase, or filter and sort a list.

Angular pipe objects are a very convenient choice for small transformations like this.

A pipe is a simple function that accepts an input value and returns the transformation result.

Angular’s ​​commonly used built-in pipe functions:

DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipi, PercentPipe, JsonPipe, etc.

They are used in template expressions, just use the pipe operator (|) .

Usage method

The pipeline operator will pass the expression result on its left side to the pipeline function on its right side. Expressions can also be concatenated through multiple pipes.

<p> 
 Title through a pipe chain: 
 {{title | uppercase | lowercase}} 
</p>

Commonly used examples:

<p class="alert alert-warning"> 
 <p>{{title|uppercase }}</p> 
 <p>{{title|uppercase|lowercase }}</p> 
 <p>{{this|json}}</p> 
 <p>{{time|date:&#39;yyyy-MM-dd&#39;}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:&#39;CNY&#39;}}</p> 
</p>

ts Attributes:

export class AppComponent { 
 title = 'app'; 
 name = '张三丰'; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += '---测试'; 
 return str; 
 } 
}

Display results:

The above is what I compiled Everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to display input content in Angular

How to query weather forecast in Angular

How to judge holidays in js

How to implement the message board function in JS

How to do it in nodejs Implement OAuth2.0 authorization service authentication

How to build a vue project on webpack

How to implement read the full text in vue

How to get the dom element in vue

How to convert the timestamp format in js

on nginx Deploy vue project (detailed tutorial)

How to implement random layout waterfall flow in ionic3

The above is the detailed content of About the usage of pipe operator (|) in Angular. For more information, please follow other related articles on the PHP Chinese website!