Introduction and usage of Angular Pipe PIPE

Preface

PIPE, translated as pipeline. Angular pipeline is a method of writing display value conversions that can be declared in HTML components. Angular pipeline was previously called a filter in AngularJS and was called a pipeline since Angular 2. The pipeline takes the data as input and converts it into the desired output.

Angular Pipes separates integers, strings, arrays, and dates as inputs, separates them with |, and converts them into formats as needed, and displays them in the browser. In an interpolation expression, you can define a pipeline and use it according to the situation, and many types of pipelines can be used in an Angular application.

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

Caps conversion

<div>
  <p ngNonBindable>{{ 'Angular' | uppercase }}</p>
  <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR -->
</div>

Date formatting

<div>
  <p ngNonBindable>{{ today | date: 'shortTime' }}</p>
  <p>{{ today | date: 'shortTime' }}</p> <!-- Output: The current time shall prevail，Output format：10:40 AM -->
</div>

Numerical formatting

<div>
  <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p>
  <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 -->
</div>

JavaScript object serialization

<div>
  <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p>
  <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } -->
</div>

Pipeline parameters

The pipeline can receive any number of parameters, using it by adding: and parameter values ​​after the pipeline name. For example: '1.4-4', if multiple parameters need to be passed, the parameters are separated by colons. The specific examples are as follows:

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p>
  <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem -->
</div>

Pipeline chain

<div>
  <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
  <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p>
</div>

Custom pipelines

The following is an example of the pipeline used in past projects to explain the steps for customizing the pipeline:

• Use the @Pipe decorator to define the metadata information of Pipe, such as the name of Pipe - i.e. the name attribute
• Implement the transform method defined in the PipeTransform interface

definition

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "formatError" })
export class FormatErrorPipe implements PipeTransform {
    constructor() {}

    transform(value: any, module: string) {
        if () {
            return ;
        } else {
            return ;
        }
    }
}

use

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

Summarize

This is all about this article about Angular Pipe PIPE. For more related Angular Pipe PIPE content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!