Built In Pipes In Angular

Introduction

 
In this article, we are going to see how to apply pipes in Angular applications.
 

Overview

 
Pipes are earlier called filters in Angular 1. They are mainly used to format the data before displaying it to the user. A pipe takes expression value as an input and transforms it into the desired output. 
 
Syntax:
  1. {{expresion | pipe}}     
Example:
  1. {{ "csharpCorner" | Uppercase }}    
The output of above line is = CSHARPCORNER Built In Pipes In Angular 
 

Why Pipes

 
Pipes are a beautiful way of transforming the data inside templates. It provides a structured and clean code. 
 
Below is the list of inbuilt pipes in Angular:
  1. Uppercase
  2. Lowercase
  3. titlecase
  4. currency
  5. date
  6. slice
  7. percent
  8. decimal
  9. Icon
  10. i18nselect
  11. i18nplural 
Now lets see each one of the pipe with example,
 

Uppercase

 
This pipe converts the template expression into uppercase. 
 
Syntax
  1. {{expression | uppercase}}     
Example
  1. {{ "csharpcorner" | uppercase }}    
Output
 
CSHARPCORNER 
 

Lowercase

 
This pipe converts the template expression into lowercase.
 
Syntax:
  1. {{ expression | lowercase }}     
Example
  1. {{ "CSHARPCORNER" | lowercase}}    
Output
 
csharpcorner 
 

Titlecase

 
This pipe converts the first character in each word of the given expression into a capital letter.
 
Syntax,
  1. {{expression | titlecase}}     
Example,
  1. {{ "csharp corner" | titlecase}}    
Output
 
Csharp Corner 
 
Now let's try to solve the below problem statementBuilt In Pipes In Angular
 
Problem Statement
 
Displaying the Website name in uppercase and article name in lowercase using built-in pipes. The output should be as shown below:
Built In Pipes In Angular
Open app.component.ts and write the below-given code:
  1. import { Component } from '@angular/core';    
  2.     
  3.  @Component({    
  4.   selector: 'app-root',    
  5.   templateUrl: './app.component.html',    
  6.   styleUrls: ['./app.component.css']    
  7. })    
  8. export class AppComponent {    
  9.   title = 'MyApplication';    
  10.   WebsiteName = 'CSharpCorner';    
  11.   ArticleName = 'Pipes In angular';    
  12.       
  13. }    
Open app.component.html and write the below-given code,
  1. <router-outlet>    
  2.   <!-- <app-hi></app-hi> -->    
  3.   <h3> {{ title | titlecase}} </h3>    
  4.   <table style="text-align:left">    
  5.       <tr>    
  6.           <th> Website Name </th>    
  7.           <td> {{ WebsiteName | uppercase }} </td>    
  8.       </tr>    
  9.       <tr>    
  10.           <th> Article Name </th>    
  11.           <td> {{ ArticleName | lowercase }} </td>    
  12.       </tr>    
  13.   </table>    
  14. </router-outlet>    
Now save the files and check the output in the browser.
 
A pipe can also have optional parameters to change the output. To pass parameters, after a pipe name add a colon( : ) followed by the parameter value.
 
Syntax:
  1. pipename : parametervalue1:parametervalue2     

Currency

 
This pipe displays a currency symbol before the expression. By default, it displays the currency symbol $.
 
Syntax:
  1. {{ expression | currency:currencyCode:symbol:digitInfo:locale }}     
Here, currencyCode is the code to display such as INR for the rupee, EUR for the euro, etc. The symbol is a Boolean value which represents whether to display currency symbol or code.
  • code: displays code instead of a symbol such as USD, EUR, etc.,
  • symbol (default): displays symbol such as $, etc.,
  • symbol-narrow: displays the narrow symbol of currency. Some countries have two symbols for their currency, regular and narrow. For example, the Canadian Dollar CAD has the symbol as CA$ and symbol-narrow as $.

date

 
This pipe can be used to display the data in the required format.
 
Syntax,
  1. {{ expression | date:format:timezone:locale }}     
An expression is a date or number in milliseconds. 
 
The format indicates in which form date/time should be displayed. The following are the pre-defined options for it.
 

i18nplural

 
It takes a numeric value as input and compares it with the values in an object and returns a string accordingly.
 
Syntax:
  1. {{ expression | i18nplural:mappingObject }}     
Here, mappingObject is an object containing different strings to be returned for different numeric values.
 

i18nselect

 
This pipe is similar to i18nplural but evaluates a string value instead. 
 
Syntax
  1. {{ expression | i18nselect:mappingObject }}     
Here, mappingObject is an object containing strings to be displayed for different values provided by the expression. 
 
Problem Statement
 
Displaying greeting message based on the language selected using i18nSelect pipe. The output should be as shown below:
Built In Pipes In Angular

Demosteps

 
Open app.component.ts and write the below given code:
  1. import { Component } from '@angular/core';    
  2.     
  3.  @Component({    
  4.   selector: 'app-root',    
  5.   templateUrl: './app.component.html',    
  6.   styleUrls: ['./app.component.css']    
  7. })    
  8. export class AppComponent {    
  9.   title = 'MyApplication';    
  10.   message: string;    
  11.   messageMap: any = { 'en''Good Morning''fr''Bonjour''es''Buenos días' };    
  12.      
  13. }    
Line 10: message property holds the language code of the selected language from the dropdown in the template.
 
Line 11: messageMap is an object having language code as keys and corresponding message as values.
 
Open app.component.html and write the below given code:
  1. <h2> Different Language wishes </h2>    
  2.  Enter your Name <input type=text #name><br/><br/> Select language to display    
  3.  <select #language (change)="message = language.value">    
  4.          <option value="en">English</option>    
  5.          <option value="fr">French</option>    
  6.          <option value="es">Spanish</option>    
  7.          <option value="de">German</option>    
  8.        </select><br/><br/>    
  9.  <h3 *ngIf="message"> {{ message | i18nSelect:messageMap }}, {{ name.value }} </h3>   
Line 09:i18nSelect will return the message corresponding to the code passed. This line renders the greeting message in the respective language selected. 
 
Save the files and check the output in the browser. 
 

Summary

 
In this article, we have seen how to apply pipes to an Angular Application. I hope this article is helpful to you. Until next time - Happy ReadingBuilt In Pipes In Angular CheersBuilt In Pipes In Angular 


Similar Articles