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:

{{expresion | pipe}}

Example:

{{ "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:

Uppercase
Lowercase
titlecase
currency
date
slice
percent
decimal
Icon
i18nselect
i18nplural

Now lets see each one of the pipe with example,

Uppercase

This pipe converts the template expression into uppercase.

Syntax

{{expression | uppercase}}

Example

{{ "csharpcorner" | uppercase }}

Output

CSHARPCORNER

Lowercase

This pipe converts the template expression into lowercase.

Syntax:

{{ expression | lowercase }}

Example

{{ "CSHARPCORNER" | lowercase}}

Output

csharpcorner

Titlecase

This pipe converts the first character in each word of the given expression into a capital letter.

Syntax,

{{expression | titlecase}}

Example,

{{ "csharp corner" | titlecase}}

Output

Csharp Corner

Now let's try to solve the below problem statement Built 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:

Open app.component.ts and write the below-given code:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'MyApplication';
WebsiteName = 'CSharpCorner';
ArticleName = 'Pipes In angular';
}

Open app.component.html and write the below-given code,

<router-outlet>
<h3> {{ title | titlecase}} </h3>
<table style="text-align:left">
<tr>
<th> Website Name </th>
<td> {{ WebsiteName | uppercase }} </td>
</tr>
<tr>
<th> Article Name </th>
<td> {{ ArticleName | lowercase }} </td>
</tr>
</table>
</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:

pipename : parametervalue1:parametervalue2

Currency

This pipe displays a currency symbol before the expression. By default, it displays the currency symbol $.

Syntax:

{{ 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,

{{ 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:

{{ 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

{{ 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:

Demosteps

Open app.component.ts and write the below given code:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'MyApplication';
message: string;
messageMap: any = { 'en': 'Good Morning', 'fr': 'Bonjour', 'es': 'Buenos dÃƒÂas' };
}

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:

<h2> Different Language wishes </h2>
Enter your Name <input type=text #name><br/><br/> Select language to display
<select #language (change)="message = language.value">
<option value="en">English</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
<option value="de">German</option>
</select><br/><br/>
<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 Reading Built In Pipes In Angular

Cheers