Angular - Built-in Pipes

---

---

Angular is a TypeScript (a superset of JavaScript) based framework used for building web applications. It offers various built-in features which include routing, data binding, server-side rendering and data transformation and formatting that help to fulfill project requirements.

Suppose your project requires some data formatting tasks, such as formatting dates, numbers, and text. For this kind of task, pipes are used in Angular to format specified data before displaying it in View. In this tutorial, we are going to cover how Angular built-in pipes work.

Built-in Pipes in Angular

Some of the important Angular built-in pipes are given below −

• LowerCasePipe
• UpperCasePipe
• SlicePipe
• DatePipe
• CurrencyPipe
• PercentPipe
• DecimalPipe

Let's see how they work with examples.

The LowerCasePipe

The LowerCasePipe is used to convert all letters of the input string to lowercase. If the input value is null or undefined, this pipe returns null.

Syntax

Syntax of the LowerCasePipe is given below −

{{ inputvalue | lowercase }}

Example

In this example, we will see the practical implementation of the LowerCasePipe.

Step 1: Import the @angular/common package and define a string and an array of strings inside the app.component.ts file.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LowerCasePipe} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, LowerCasePipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  TutorialName: string = 'Angular'; 
  chapterList: string[] = ["Binding", "Pipe", "Services"]; 
}

Step 2: Open app.component.html file and apply lowercase pipe to each string as shown below −

<p>The name of this Tutorial is {{TutorialName}}</p>
<p>The first Topic is {{chapterList[0] | lowercase}}</p>
<p>The second Topic is {{chapterList[1] | lowercase}}</p>
<p>The third Topic is {{chapterList[2]| lowercase}}</p>
<router-outlet /> 

Once you save all the code changes, run the application to get the following output −

The name of this Tutorial is Angular
The first Topic is binding
The second Topic is pipe
The third Topic is services

The UpperCasePipe

The UpperCasePipe is used to convert all letters of the input string to uppercase. If the input value is null or undefined, this pipe returns null.

Syntax

The UpperCasePipe has the following syntax −

{{ inputvalue | uppercase }}

Example

The following example shows how to use the UpperCasePipe.

Step 1: Add the following code in the app.component.ts file.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { UpperCasePipe} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, UpperCasePipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  TutorialName: string = 'Angular'; 
  chapterList: string[] = ["Binding", "Pipe", "Services"]; 
}

Step 2: Add the below code in the app.component.html file.

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{chapterList[0] | uppercase }}<br> 
   The second Topic is {{chapterList[1] | uppercase }}<br> 
   The third Topic is {{chapterList[2]| uppercase }}<br> 
</div>

Once you save all the code changes and refresh the browser, you will get the following output −

The name of this Tutorial is Angular
The first Topic is BINDING
The second Topic is PIPE
The third Topic is SERVICES

The SlicePipe

The SlicePipe is used to slice a piece of data from the input string. It creates a new array or string containing sub-string from the specified string based on the start and end positions.

Syntax

The below code block contains the syntax of SlicePipe −

{{ inputvalue | slice:start:end }}

Where,

• start − This is the starting position from where the slicing begins.

• end − This is the position where the slicing should end.

Example

The following example illustrates the use of SlicePipe.

Step 1: First ensure the following code is present in the app.component.ts file

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { SlicePipe} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, SlicePipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  TutorialName: string = 'Angular'; 
  chapterList: string[] = ["Binding", "Pipe", "Services"]; 
}

Step 2: Change the code of app.component.html file with the code given below −

<div> 
   The name of this Tutorial is {{TutorialName}}<br>  
   The first Topic is {{chapterList[0] | slice:1:2}}<br> 
   The second Topic is {{chapterList[1] | slice:1:3}}<br> 
   The third Topic is {{chapterList[2]| slice:2:3}}<br> 
</div> 

Now, refresh the browser, you will get the below result on screen −

The name of this Tutorial is Angular
The first Topic is i
The second Topic is ip
The third Topic is r

The DatePipe

This is used to convert the input string to date format. If the input value is null, the DatePipe returns null as an output.

Syntax

Syntax of the DatePipe is as follows −

{{ inputvalue | date:"dateformat" }}

Where,

dateformat is the date format the input string should be converted to.

Example

Let's understand the working of DatePipe using a sample example.

Step 1: Change the code of the app.component.ts file with the following code −

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DatePipe} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DatePipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  presentDate = new Date();
}

Step 2: Navigate to the app.component.html file and embed the DatePipe inside HTML element as shown in the given code block −

<div> 
   Today's date :- {{presentDate | date:"MM/dd/yy"}}   
</div>

Once you save all the code changes, you will get the following output −

Today's date :- 01/07/25

The CurrencyPipe

The CurrencyPipe converts the input string to currency format. The given input value will be formatted according to the locale rules and optional parameters, such as code, symbol, symbol-narrow and digitsInfo.

Syntax

Syntax of the CurrencyPipe is given below −

{{ inputvalue | currency : 'code' : 'symbol' : 'symbol-narrow' }}

Where,

code − The ISO 4217 currency code, such as 'USD' for US dollars or 'EUR' for euros.

symbol − Displays the currency symbol.

symbol-narrow − Displays a narrow version of the currency symbol.

digitsInfo − It specifies the number of decimal places and the minimum and maximum number of integer digits.

NOTE: All the parameters are optional.

Example

In this example, we will see the use of CurrencyPipe.

Step 1: Declare and initialize a number inside the app.component.ts file.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CurrencyPipe} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CurrencyPipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  newValue: number = 54213;
}

Step 2: Next, open the app.component.html file and apply the currency pipe to the defined number.

<div> 
   The number in currency: {{newValue | currency}}     
</div>

All the above changes will generate the following result on browser −

The number in currency: $54,213.00

The PercentPipe

The PercentPipe is used to convert the input string to percentage format. Like other built-in pipes mentioned above, it also returns null when an undefined or null value is passed.

Syntax

The PercentPipe has the following syntax −

{{ inputvalue | percent : "digitsInfo" }}

Where,

digitsInfo controls the formatting of the percentage value. It determines the number of decimal places and the minimum and maximum number of integer digits.

Example

Let's understand how PercentPipe works with the help of an example.

Step 1: Define a decimal number inside the app.component.ts file. Also, make sure to import the PercentPipe.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PercentPipe} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, PercentPipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent { 
  newValue: number = 0.59;
} 

Step 2: Make the following changes in app.component.html file.

<div>
   The given number in percentage: {{newValue | percent}} 
</div>

Once you save all the code changes, you will see the following output on your browser −

The given number in percentage: 59%

The DecimalPipe

The DecimalPipe formats a number into a string of decimal point numbers. The given input number will be formatted according to the specified digitsInfo parameter.

Syntax

The following code block contains the syntax of DecimalPipe.

{{ inputvalue | decimal : "digitsInfo" }} 

Where,

digitsInfo − It determines the number of decimal places and the minimum and maximum number of integer digits.

Example

The example given below demonstrates the working of DecimalPipe.

Step 1: First ensure the following code is present in the app.component.ts file.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DecimalPipe} from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DecimalPipe],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  newValue: number = 5902;
}

Step 2: Next, ensure the following code is present in the app.component.html file.

<div> 
   The given number in decimal: {{newValue | number:'1.2-2'}}        
</div>

Save all the mentioned changes to get the output.

The given number in decimal: 5,902.00