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 −
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'})exportclassAppComponent{
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 ofthis 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'})exportclassAppComponent{
TutorialName: string ='Angular';
chapterList: string[]=["Binding","Pipe","Services"];}
Step 2: Add the below code in the app.component.html file.
<div>
The name ofthis 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'})exportclassAppComponent{
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 ofthis 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'})exportclassAppComponent{
presentDate =newDate();}
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'})exportclassAppComponent{
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'})exportclassAppComponent{
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'})exportclassAppComponent{
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
