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';

@Pipe({
name: 'employeeTitlePipe'
})
export class EmployeeTitlePipePipe implements PipeTransform {

transform(value: String, gender: String): String {
if(gender.toLowerCase()=='male'){
return "Mr."+value;
}else{
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>