Angular 2 [PART-8 ] Pipes and Custom Pipes

Angular pipes

A pipe takes in data as input and transforms it to a desired output. .

syntax {Your Variable | Your Pipe Condition }

for example {{ birthday | date }}

here birthday will display in date format

you can check

Used for decerate or filter Data
Pipes transform Data before display

Costume Pipeline
we can create custome pipe CLI code: ng g pipe `New Pipe Name`
Here Mr./Miss. is identified by newly created pipe named employee-pipe-title
check employee-title-pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

name: 'employeeTitlePipe'
export class EmployeeTitlePipePipe implements PipeTransform {

transform(value: String, gender: String): String {
return "Mr."+value;
return "Miss."+value;


In view part Use same as inbuilt Pipe and pass parameter by : ex :employee.gender

<td>{{employee.firstName | employeeTitlePipe:employee.gender }}{{employee.lastName}}</td>

Leave a Reply

Your email address will not be published. Required fields are marked *