How To Use Pipes In Angular

Introduction :

In this blog, we are going to explain pipes in the Angular. In Angular, a pipe is a way through which we can get the desired output. In other words, a pipe takes data as input and transforms it into the desired output. We will also learn the types of pipes in Angular.

To transform data we are using the "|" character. The syntax of transforming the data are given below:-

{{ Welcome to Angular 4 | lowercase}}

Pipe takes integers, strings, arrays, and date as input, separated with ‘|’ to be converted in the required format and display the same in the browser.

Here we are creating an exaemple to define a pipe. In this exemple we are going to display the given text to uppercase. This can be done using pipes as follows :-

app.component.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Pipes In Angular';

}

The line of code goes into the app.component.html file are given below :-

<b>{{title | uppercase}}</b><br/>

<b>{{title | lowercase}}</b>

The output shown on the browser is given below:

PIPES IN ANGULAR

pipes in angular

Angular provides us some built-in pipes. The pipes are listed given below:-

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

We have already seen the lowercase and uppercase pipes. Let us now see how the other pipes work.

The line of code will help us define the required variables in app.component.ts file are given below :-

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'Pipes In Angular';

todaydate = new Date();

jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};

months = ["Jan", "Feb", "Mar", "April", "May", "Jun",

"July", "Aug", "Sept", "Oct", "Nov", "Dec"];

}

The pipes in the app.component.html file.

<div style = "width:100%;">

<div style = "width:40%;float:left;border:solid 1px black;">

<h1>Uppercase Pipe</h1>

<b>{{title | uppercase}}</b><br/>

<h1>Lowercase Pipe</h1>

<b>{{title | lowercase}}</b>

<h1>Currency Pipe</h1>

<b>{{1589.23 | currency:"USD"}}</b><br/>

<b>{{1589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.

<h1>Date pipe</h1>

<b>{{todaydate | date:'d/M/y'}}</b><br/>

<b>{{todaydate | date:'shortTime'}}</b>

<h1>Decimal Pipe</h1>

<b>{{ 254.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.

</div>

<div style = "width:40%;float:left;border:solid 1px black;">

<h1>Json Pipe</h1>

<b>{{ jsonval | json }}</b>

<h1>Percent Pipe</h1>

<b>{{00.54455 | percent}}</b>

<h1>Slice Pipe</h1>

<b>{{months | slice:2:6}}</b>

// here 2 and 6 refers to the start and the end index

</div>

</div>

OUTPUT :-

Summery:

In this blog we have learned only basic uses of the pipes in angular using some pipes like lowercase, uppercase, datepipe, currency pipe, decimal pipe, etc. to transform input date to desired output data.

We are an ERP development company that enables enterprises to streamline operations and drive returns, using next-gen technologies, with our development services. Our services include developing applications for all your ERP needs from CRM, WFM, and HRM to eCommerce, accounting, and wealth management software. We use an extensive tech stack including Angular, Java 8, and Spring to develop end to end customized software for your enterprise. Get in touch with our experts to know more about how you can implement these technologies into your business.