Pipes

• Angular Pipes are small but mighty features designed to transform the way data is presented in the user interface, offering developers a flexible and efficient means of data manipulation.

Angular provides some built-in pipes. These pipes are listed below −

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

Example:

Step 1: Create an Angular project using Angular CLI.

ng new Angular

Step 2: Create a new component named ‘pipes-example’

ng g c pipes-example

Step 3: Now use the different pipes in the ‘pipes-example.component.html’.

<h2>Date Pipe</h2>
<p>Current Date: {{ currentDate | date: 'fullDate' }}</p>

<h2>Number Pipe</h2>
<p>Amount: {{ amount | currency: 'USD':true:'1.2-2' }}</p>

<h2>Uppercase and Lowercase Pipe</h2>
<p>Original Message: {{ message }}</p>
<p>Uppercase: {{ message | uppercase }}</p>
<p>Lowercase: {{ message | lowercase }}</p>

<h2>Percent Pipe</h2>
<p>Percentage Value: {{ percentValue | percent }}</p>

<h2>Slice Pipe</h2>
<p>Fruits: {{ fruits | slice:1:3 }}</p>

Step 4: Edit the 'pipes-example.component.ts' to define the pipes.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pipes-example',
  templateUrl: './pipes-example.component.html',
  styleUrls: ['./pipes-example.component.css']
})
export class PipesExampleComponent {

  currentDate: Date = new Date();
  amount: number = 1234.56789;
  message: string = 'Hello, Angular Pipes!';
  percentValue: number = 0.75;
  fruits: string[] = ['Apple', 'Banana', 'Cherry', 'Date'];


}

Step 5: Add the ‘<app-pipes-example></app-pipes-example>’ to the ‘app.component.html’ to include the ‘PipesExample-Component’ in the main application.

<h1>Angular Pipes Example</h1>
<app-pipes-example></app-pipes-example>

Step 6: Now run or compile the application.

ng serve

You will see the result on http://localhost:4200