Angular Pipes - Built in and Custom Pipe

Pipes in Angular transform the data before it display it to view. In Angular 1 i.e. AngularJs, Pipes were called as filter.
Angular offers built-in pipes and custom pipes as well. To apply pipe Angular uses | symbol before any pipe.

Table of Contents

Syntax to use pipe in Angular –

Angular Built-in Pipes

LowerCasePipe – Use to change data into lowercase.

<b>{{‘Hello Angular’ | lowercase }}</b>

Output – hello angular

Read:- Angular Interview Questions

UpperCasePipe – Use to change data into uppercase.

<b>{{‘Hello Angular’ | uppercase }}</b>

Output – HELLO ANGULAR

DatePipe – To format the value in required date format

<h1>{{’03/04/2019′ | date}}</h1>

Output – Mar 4, 2019

<h1>{{’03/04/2019′ | date:’d-MMM-y’}}</h1>

Output – 4-Mar-2019

CurrencyPipe – To format a value in given currency with or without currency sign.

<b>{{‘1201.10′ | currency:’USD’}}</b>

Output – $1,201.10

<b>{{‘1201.10′ | currency:’INR’}}</b>

Output – ₹1,201.10

If you don’t want to show currency sign in view –

<b>{{‘1201’ | currency:”INR”:false}}</b>

Output – INR 1,201.00

NumberPipe – To format a given number

<b>{{‘1201’ | number}}</b>

Output – 1,201

<b>{{ 1254.78787814 | number: ‘3.4-4’ }}</b>

Output – 1,254.7879

PercentPipe – To format a given input and show the percentage value.

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

Output – 79%

<b>{{ .23 | percent }}</b>

Output – 23%

Custom Pipes in Angular 7

If our requirement is full filled with built-in pipes then we can use them else we may create custom pipes to full fill our requirement.

First we have to generate files to work with custom pipe. To do this use below command

ng g p <pipename>

I have created a pipe with name add which will do addition for given value and parameter.

So, If my pipe name is add then syntax should be like this –

It means result will be 10+5 i.e. 15.

Let’s implement this custom pipe with Angular 7

To generate custom pipe with name add, we will use below Angular CLI command.

ng g p add

Once we have generated the custom pipe files, we will modify the code as per our logic.
Open add.pipe.ts file in editor and make changes in transform() method.

add.pipe.ts File code –

import { Pipe, PipeTransform } from ‘@angular/core’;
@Pipe({
name: ‘add’
})
export class AddPipe implements PipeTransform {
transform(value: number, args: any): any {
if(args)
{
return value + args;
}
else return value;
}
}

Make sure our pipe is imported in root module file i.e. app.module.ts file –

import { AddPipe } from ‘./pipe/add.pipe’;

And in declarations as well.

declarations: [
AppComponent,
Example1Component,
Custompipe1Pipe,
AddPipe
]

Now, let’s open component’s html file and write below code –

<b>{{10 | add:5}}</b>

Output – 15

Similarly, we can create a custom pipe in Angular as per our project requirements.

Note: Custom pipe in Angular is very important from interview point.

Hope you like this blog. Please share the URL on social media.
Please give your feedback in the comment box below.

You may like other blogs –

MVC Tutorial
Web API Tutorial
Building Blocks of Angular
Learn TypeScript

Interview Questions and Answers Series –

MVC Interview Questions and Answers
Web API interview questions and answers

Keep following – SharePointCafe.Net

Prev – Create and Consume API in Angular 7
Next – Template Driven and Reactive Forms in Angular

Angular Pipes – Built in and Custom Pipe

Angular Built-in Pipes

Custom Pipes in Angular 7

Let’s implement this custom pipe with Angular 7

Leave a Comment Cancel reply

Angular Built-in Pipes

Custom Pipes in Angular 7

Let’s implement this custom pipe with Angular 7

Related posts:

Leave a Comment Cancel reply