Angular pipes:

· The Angular Pipes are a mechanism for transforming data in an Angular application.

· Pipes are used to transform data in real-time, so changes to data are reflected immediately in the user interface.

Pipes are simple functions to use in template expressions to accept an input value and return a transformed value.

Angular pipes:

· The Angular Pipes are a mechanism for transforming data in an Angular application.

· Pipes are used to transform data in real-time, so changes to data are reflected immediately in the user interface.

· Pipes are simple functions to use in template expressions to accept an input value and return a transformed value.

Types of Angular pipes:

· Build-in pipes

· Custom pipes

Working of Angular pipes:

Angular Pipes take a value as input and return a transformed value. Pipes can be chained together to create complex transformations.

Pipes are added to an Angular template using the pipe symbol (|) followed by the name of the pipe

Build in pipes:

The built-in pipes can be used for common data transformations such as date formatting, number formatting, and currency formatting.

· DatePipe

· UpperCasePipe

· LowerCasePipe.

· CurrencyPipe

· DecimalPipe

· PercentPipe

DatePipe:

The DataPipe formats a date value according to locale rules.

<p>The current date is {{ currentDate | date:’fullDate’ }}</p>

DecimalPipe:

The DecimalPipe transforms a number into a string with a decimal point, formatted according to locale rules.

<p>The total cost is {{ totalCost | number:’1.2–2′ }}</p>

CurrencyPipe:

The CurrencyPipe transforms a number to a currency string, formatted according to locale rules.

<p>The price is {{ price | currency:’USD’ }}</p>

UpperCasePipe:

The UpperCasePipe transforms text to all upper case.

<p>The text in uppercase is {{ myText | uppercase }}</p>

Lowercase Pipe:

The LowercasePipe used to convert text to lowercase.

<p>The text in lowercase is {{ myText | lowercase }}</p>

Percent Pipe:

The PercentPipe transforms a number to a percentage string, formatted according to locale rules.

<p>The percentage is {{ percentage | percent }}</p>

Pipes and Precedence:

The pipe operator has a higher precedence than the ternary operator (?:), which means a ? b : c | x is parsed as a ? b : (c | x). The pipe operator cannot be used without parentheses in the first and second operands of ?:.

In precedence, if you want a pipe to apply to the result of a ternary, wrap the entire expression in parentheses; for example, (a ? b : c) | x.

Demo:

Step 1:

Create a new Angular project using the Angular CLI.

ng new my-app

Step2:

Create a new file called reverse.pipe.ts in the app folder.

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

@Pipe({

name: ‘reverse’

})

export class ReversePipe implements PipeTransform {

transform(value: string): string {

if (!value) return ‘’;

return value.split(‘’).reverse().join(‘’);

}

}

Step3:

In the app.module.ts file, import and declare the ReversePipe.

import { NgModule } from ‘@angular/core’;

import { BrowserModule } from ‘@angular/platform-browser’;

import { AppComponent } from ‘./app.component’;

import { ReversePipe } from ‘./reverse.pipe’;

@NgModule({

declarations: [AppComponent, ReversePipe],

imports: [BrowserModule],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}

Step4:

In the app.component.html file, use the ReversePipe.

<h1>{{ ‘Hello World’ | reverse }}</h1>

Step5:

ng serve

Output:

dlroWolleH

Conclusion:

Finally Angular pipes are used to transform data in real-time and make it easier for users to understand. There are built-in pipes that can be used for common data transformations, and custom pipes can be created to suit the needs of an application