Pipes in Angular

Pipes are often used for formatting dates, numbers, and Strings and they can be customized to suit various needs. In this article, we explain about how to use pipes in Angular with examples and related outputs for your reference.

Prerequisites:

To understand this article you should have knowledge of the following.

• Angular CLI
• JavaScript
• Node JS and NPM

Pipes in Angular

The Pipes in Angular are powerful features that transform data directly in your template. They take in data as input and transform it into the desired output. Angular comes with several built-in pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and DecimalPipe.

Syntax:

{{ today | date:'fullDate' }}

Commonly Used Pipes in Angular

Below we provide built in and mostly used pipes in angular.

• DatePipe: Formats a date value according to locale rules
• UpperCasePipe: Transforms text to uppercase
• LowerCasePipe: Transforms text to lowercase
• CurrencyPipe: Formats a number as currency.
• DecimalPipe: Formats a number as decimal.
• PercentPipe: Formats a number as a percentage.
• SlicePipe: Slice a String or Array and return a new sub string or sub array.
• JsonPipe: Converts a value into its JSON String representation.
• TitleCasePipe: Capitalizes the first letter of each word.
• KeyValuePipe: This pipe is used for transform an object or a Map into an array of key value pairs.

Steps to Create the Application

Step 1: Install Angular CLI

Open your terminal and run:

npm install -g @angular/cli

Step 2: Create a New Angular Project

ng new pipes

Step 3: Navigate to Your Project Directory

cd pipes

Project Structure:

The updated dependencies in the package.json file are:

"dependencies": {
 "@angular/animations": "^18.0.0",
 "@angular/common": "^18.0.0",
 "@angular/compiler": "^18.0.0",
 "@angular/core": "^18.0.0",
 "@angular/forms": "^18.0.0",
 "@angular/platform-browser": "^18.0.0",
 "@angular/platform-browser-dynamic": "^18.0.0",
 "@angular/platform-server": "^18.0.0",
 "@angular/router": "^18.0.0",
 "@angular/ssr": "^18.0.0",
 "express": "^4.18.2",
 "rxjs": "~7.8.0",
 "tslib": "^2.3.0",
 "zone.js": "~0.14.3"
}

Here we provide syntax and example and outputs for each pipe mention in the above list.

DatePipe

The DatePipe is used for Formats a date value according to locale rules.

Syntax:

<p>{{ currentDate | date: 'fullDate' }}</p>

Example: Add the below mentioned code in app.component.ts and app.component.html file.The below HTML code holds the pipe for the currentDate. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!-- app.component.html --> <p>{{ currentDate | date: 'fullDate' }}</p> 

// 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',  styleUrls: ['./app.component.css'] }) export class AppComponent {  currentDate = new Date();  title = 'Pipes'; } 

Output

UpperCasePipe

This UpperCasePipe is used for transform text to uppercase

Syntax:

<p>{{ 'hello world' | uppercase }}</p>

Example: Add the below mentioned code in app.component.ts and app.component.html file.The below HTML code holds the pipe for the Uppercase. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!-- app.component.html --> <p>{{ 'geeksforgeeks' | uppercase }}</p> 

// 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 = 'Pipes'; } 

Output

LowerCasePipe

This LowerCasePipe is used for Transforms text to lowercase.

Syntax:

<p>{{ 'GEEKSFORGEEKS' | lowercase }}</p>

Example: Add the below mentioned code in app.component.ts and app.component.html file. The below HTML code holds the pipe for the LowerCase. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!-- app.component.html ---> <p>{{ 'GEEKSFORGEEKS' | lowercase }}</p> 

//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 = 'Pipes'; } 

Output

CurrencyPipe

The CurrencyPipe is used for Formats a number as currency.

Syntax:

<p>{{ 12345.6789 | currency: 'INR' }}</p>

Example: Add the below mentioned app.component.ts and app.component.html file. The below HTML code holds the pipe for the Currency. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!--app.component.html ---> <p>{{ 12345.6789 | currency: 'INR' }}</p> 

// 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 = 'Pipes'; } 

Output

DecimalPipe

The DecimalPipe is used for Formats a number as a decimal.

Syntax:

<p>{{ 12345.6789 | number: '1.2-2' }}</p>

Example: Add the below mentioned app.component.ts and app.component.html file. The below HTML code holds the pipe for the Decimal Number. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!---app.component.html---> <p>{{ 12345.6789 | number: '1.2-2' }}</p> 

// 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 = 'Pipes'; } 

Output

PercentPipe

The PercentPipe is used for Formats a number as a percentage.

Syntax:

<p>{{ 0.6789 | percent: '1.2-2' }}</p>

Example: Add the below mentioned app.component.ts and app.component.html file. The below HTML code holds the pipe for the Percent. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!--app.component.html--> <p>{{ 0.6789 | percent: '1.2-2' }}</p> 

//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 = 'Pipes'; } 

Output

SlicePipe

The SlicePipe is used for Slices a string or array and returns a new sub string or sub array.

Syntax:

for String:

<p>{{ 'Angular Pipes' | slice: 0:7 }}</p>

for Array:

<p>{{ [1, 2, 3, 4, 5] | slice: 1:3 }}</p>

Example: Add the below mentioned app.component.ts and app.component.html file. The below HTML code holds the pipe for the Slice. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!--app.component.html--> <p>{{ 'GeeksForGeeks' | slice: 0:7 }}</p> <p>{{ [1, 2, 3, 4, 5] | slice: 1:3 }}</p> 

// 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 = 'Pipes'; } 

Output

JsonPipe

The JsonPipe is used for Converts a value into its JSON string representation.

Syntax:

<p>{{ { name: 'John', age: 30 } | json }}</p>

Example: Add the below mentioned code in app.component.html and app.component.ts file.The below HTML code holds the pipe for the JSON Format. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!--app.component.html ---> <p>{{ { name: 'John', age: 30 } | json }}</p> 

//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 = 'Pipes'; } 

Output

TitleCasePipe

The TitleCasePipe is used for Capitalizes the first letter of each word.

Syntax:

<p>{{ 'welcome to geeksforgeeks' | titlecase }}</p>

Example: Add the below mentioned app.component.ts and app.component.html file.The below HTML code holds the pipe for the TitleCase. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!-- app.component.html ---> <p>{{ 'welcome to geeksforgeeks' | titlecase }}</p> 

// 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 = 'Pipes'; } 

Output

KeyValuePipe

The KeyValuePipe is used for Transforms an object or a Map into an array of key value pairs.

Syntax:

<div *ngFor="let item of object | keyvalue"> 
 Key: {{ item.key }}, Value: {{ item.value }}
</div>

Example: Add the below mentioned app.component.ts and app.component.html file. The below HTML code holds the pipe for the KeyValue. TS file holds the data about component being standalone and imports holds the imports made for the particular component.

<!-- app.component.html --> <div *ngFor="let item of object | keyvalue"> Key: {{ item.key }}, Value: {{ item.value }} </div> 

// 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 = 'Pipes';  object = { id: 1, name: 'GeeksForGeeks' }; } 

Output

Conclusion

Angular pipes are versatile tools for transforming data in your template they help keep your code clean and declarative making it easier to format and display data. Whether you are using built in pipes understanding how to leverage pipes will enhance the flexibility and reliability of your Angular application.