Built-in Pipes in Angular 17
In theory, pipes are just basic functions that take an input value, process it, and output an altered result. Numerous built-in pipelines are supported by Angular. You can, however, also make custom pipes to meet your needs. Among the noteworthy characteristics are: define pipes with the pipe "|" symbol.
There are several methods to integrate built-in pipes in Angular 17 which are as follows:
Steps to create pipes
Step 1: create an angular project
ng new <YOUR_PROJECT_NAME>Folder Structure:
Folder Strucutre
Syntax:
{{title | uppercase}} Step 2: app.component.ts in app module
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,CommonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'pipe';
}
LowerCase
Example: To demonstrate creating the built-in LowerCase pipe in Angular 17.
<!--app.component.html-->
<h1>Lowercase Pipe</h1>
<b>{{title | lowercase}}</b><br/>
<b>{{"HELLO GEEKS"| lowercase}}</b><br/>
Output:
.png)
Uppercase
Example: To demonstrate creating the built-in UpperCase pipe in Angular 17.
<!--app.component.html-->
<h1>Uppercase Pipe</h1>
<b>{{title | uppercase}}</b><br/>
<b>{{"Hello Geeks"| uppercase}}</b><br/>
Output:
.png)
JSONpipe
app.component.ts in add json data
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,CommonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'pipe';
mydata = {name: 'geek', age: '25', address:{a1: 'Paris', a2: 'France'}};
}
Example: To demonstrate creating the built-in JSON pipe in Angular 17.
<!--app.component.html-->
<h1>Json Pipe</h1>
<b>{{mydata | json}}</b>
Output:
.png)
Datepipe
Example: To demonstrate creating datepipe.
//app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,CommonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'pipe';
todaydate = new Date();
}
Example: To demonstrate creating the built-in Data pipe in Angular 17.
<!--app.component.html-->
<h1>Date pipe</h1>
<b>{{todaydate | date:'d/M/y'}}</b><br />
<b>{{todaydate | date:'shortTime'}}</b>
Output:
.png)
Currencypipe
Example: To demonstrate creating the built-in Currency pipe in Angular 17.
<!--app.component.html-->
<h1>currency Pipe</h1>
<h3>{{1220 | currency :'INR'}}</h3>
<h3>{{12200| currency :'USD'}}</h3>
<h3>{{12200| currency :'GBP'}}</h3>
Output:
.png)
Percentpipe
Example: To demonstrate creating the built-in Percent pipe in Angular 17.
<!--app.component.html-->
<h1>Percent Pipe</h1>
<b>{{00.84565 | percent}}</b>
Output:
.png)
Slicepipe
// app.component.ts
JavaScriptimport { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, CommonModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'pipe';
months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',
'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
}
Example: To demonstrate creating the built-in Slice pipe in Angular 17.
<!--app.component.html-->
<h1>Slice Pipe</h1>
<b>{{months | slice:3:9}}</b>
Output:
.png)
Decimalpipe
Example: To demonstrate creating the built-in Decimal pipe in Angular 17.
<!--app.component.html-->
<h1>Decimal Pipe</h1>
<b>{{ 454.78787814 | number: '3.4-4' }}</b>
Output:
.png)
