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