Introduction and usage of Angular pipeline PIPE

Preface

PIPE, translated as pipeline. Angular pipes are a way to write transformations of display values ​​that can be declared in HTML components. Angular pipes were previously called filters in AngularJS and are now called pipes since Angular 2. A pipeline takes data as input and transforms it into the desired output.

Angular Pipes takes integers, strings, arrays, and dates as input separated by | and then converts them into the required format and displays them in the browser. In interpolation expressions, you can define pipes and use them as appropriate. There are many types of pipes that you can use 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

Uppercase 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: Based on the current time, output format: 10:40 AM -->
</div>

Numeric 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

A pipeline can accept any number of parameters by appending : and the parameter value after the pipeline name. For example, number: '1.4-4'. If you need to pass multiple parameters, separate them with 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 pipeline

The following uses the pipeline used in previous projects as an example to explain the steps of customizing the pipeline:

• Use the @Pipe decorator to define the metadata information of the Pipe, such as the name of the Pipe - that is, 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 (value.code) {
            return value.desc;
        } else {
            return value.message;
        }
    }
}

use

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

Summarize

This is the end of this article about Angular pipe PIPE. For more relevant Angular pipe PIPE content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!