Angular

Author: zeptobook.com Published: 2024-01-16

In Angular application sometimes we needs to show formatted data to the users instead of raw data. Like date data it would be great if we can show date like December 10 2018 instead of 12102018 or 12182018.

In earlier version of Angular 2.0 pipes were knows as Filters. In later Angular version 2 these filters are known as Pipes to format the data.

To read more about Filters in AngularJS 2 click the below link

How to create and use filters in AngularJS

The pipe symbol is used for formatting the data. There are some builtin pipes in Angular. These are mentioned here.

Angular BuiltIn Pipes

Uppercasepipe
Lowercasepipe
Currencypipe
Datepipe
Jsonpipe
Decimalpipe
Percentpipe
Slicepipe

Lets go through details of these pipes one by one.

Uppercasepipe

import Component from angulscore

Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent title testproj

div style textaligncenter h1 Welcome to title br Uppercase example title uppercase h1 div routeroutletrouteroutlet

The following line of code will format the title in uppercase.

title uppercase

Lowercasepipe

div style textaligncenter h1 Welcome to title br Lowercase example title lowercase h1 div routeroutletrouteroutlet

The following line of code will format the title in lowercase.

title lowercase

Currencypipe

div style textaligncenter h1 Welcome to title br Currency example amount currency USD br amount currency USDtrue h1 div routeroutletrouteroutlet

import Component from angulscore

Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent title testproj amount 7598

Here in our appcomponentts file we have amount property and we are format this in USD currency using these two lines of codes.

amount currency USD

amount currency USDtrue

Note If you set USD to true it will show sign along with amount.

Datepipe

import Component from angulscore

Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent title testproj currentDate new Date

div style textaligncenter h1 Welcome to title br Date example currentDate date br currentDate dateMd ybr currentDate dateshortTime h1 div routeroutletrouteroutlet

Here we showed current date in different format using the parameters.

currentDate date

currentDate dateMd y

currentDate dateshortTime

Jsonpipe

import Component from angulscore

Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent title testproj addressJson name ZeptoBook city Jersey City state New Jersey

div style textaligncenter h1 Welcome to title br Json example addressJson json h1 div routeroutletrouteroutlet

Here we have created a json object addressJson and apply the Json pipe to render on the browser.

addressJson json

Decimalpipe

Decimalpipe is used to format a number as a decimal number as per locale use. The syntax for writing this is

numberexpression numberdigitInfo

Lets see each part in detail

numberexpression this is an angular expression that will give output a number.

number number is a pipe keyword that will be used with pipe operator.

digitInfo defines number format.

Lets dive into the details of digitInfo syntax. The syntax is below

minIntegerDigitsminFractionDigitsmaxFractionDigits

Below is the description of each part.

minIntegarDigits minimum number of integer digits. Default is 1.

minFractionDigits minimum number of fraction digits. Default is 0.

maxFractionDigits maximum number of fraction digits. Default is 3.

Lets have a look at few examples.

1 Using Default Format

10 3

Where

1 minIntegerDigit 0 minFractionDigit 3 maxFractionDigit

Lets declare a property num and assign this value.

num 844856248

in template file.

num number

Output will be

84486

2 Using Format 32 5

3 minIntegerDigit 2 minFractionDigit 5 maxFractionDigit

In template file

num number 32 5

Output will be

08448562

3 Using Format 32 5

Declare another property num1 and assign the value.

num1 05

In template file

num1 number 32 5

Output will be

00050

import Component from angulscore

Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent title testproj num 844856248 num1 05

div style textaligncenter h1 Welcome to title br Decimal example num number br num number 32 5 br num1 number 32 5 h1 div routeroutletrouteroutlet

Percentpipe

Percentpipe format a number as a percent as per locale rules. The syntax for writing this is

numberexpression percentdigitInfo

Lets see each part in detail

numberexpression this is an angular expression that will give output a number.

percent percent is a pipe keyword that will be used with pipe operator and convert number into percent.

digitInfo defines percent format.

Lets dive into the details of digitInfo syntax. The syntax is below

minIntegerDigitsminFractionDigitsmaxFractionDigits

Below is the description of each part.

minIntegarDigits minimum number of integer digits. Default is 1.

minFractionDigits minimum number of fraction digits. Default is 0.

maxFractionDigits maximum number of fraction digits. Default is 3.

Lets have a look at few examples.

1 Using Default Format

10 3

Where

1 minIntegerDigit 0 minFractionDigit 3 maxFractionDigit

Lets declare a property numPercent and assign this value.

numPercent 15

In template file

numPercent percent

Output will be

150

2 Using Format 22 5

2 minIntegerDigit 2 minFractionDigit 5 maxFractionDigit

In template file

numPercent percent 22 5

Output will be

15000

import Component from angulscore

Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent title testproj numPercent 15

div style textaligncenter h1 Welcome to title br Percent example numPercent percent br numPercent percent 22 5 h1 div routeroutletrouteroutlet

SlicePipe

Slice pipe is used to slice some part of an array or string. The syntax of SlicePipe is below

stringorarray slicestartend

Lets see details of above syntax.

stringorarray any string or array where we will apply Slice pipe.

slice a slice pipe

start the starting index of the subset to return

end the ending index of the subset to return

Lets have a look at few examples. Create an number array numArr in component class.

numArr number 1 2 3 4 5 6

Lets slice this array with different parameters.

numArr slice 2

Output will be

3 4 5 6

Another example of slice.

numArr slice 2 4

Output will be

3 4

import Component from angulscore

Component selector approot templateUrl appcomponenthtml styleUrls appcomponentcss export class AppComponent title testproj numArr number 1 2 3 4 5 6

div style textaligncenter h1 Welcome to title br Slice example pnumArr slice 2 numArr slice 2 p pnumArr slice 24 numArr slice 2 4 p h1 div routeroutletrouteroutlet

Summary

So in this blog we learned about different types of pipes used in Angular. We learned about their syntax how to use them with different code snippets. Using pipes in angular we can format data in a user friendly manner.

Reference

httpsangularioguidepipes