Angular Series #3: Pipe & Custom Pipe

In this article, we will see how we can use pipe in angular and also build a custom pipe in angular,

Angular Pipe

Pipe transforms the data before the display. In your code you may need to convert the text to uppercase, limiting decimal places all these operations are possible with the angular pipe. There are several built-in pipes are available in angular which includes lowercase, uppercase, decimal, date, currency, etc.

Some key points:

To apply pipe on bound property use pipe character ‘|’

We can also use chain pipe and passing of parameter to pipe using ‘:’ as shown in the below example {{employee.dob | date:’fullDate’ | uppercase}}

Let’s look into the example which converts employee name to uppercase and operation on a date also,

Employee-detail.component.ts

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-employee-details’,
templateUrl: ‘./employee-details.component.html’,
styleUrls: [‘./employee-details.component.css’]
})
export class EmployeeDetailsComponent implements OnInit {
employees:any[];
constructor() {
this.employees=[
{empid:’1',name:’Vaibhav’,dob:’02/25/2000'},
{empid:’2',name:’Employee1',dob:’06/08/2000'},
{empid:’3',name:’Employee2',dob:’03/18/2000'}
];
}
ngOnInit() {
}
getEmployee():void{
this.employees=[
{empid:’1',name:’Vaibhav’},
{empid:’2',name:’Employee1'},
{empid:’3',name:’Employee2'},
{empid:’4',name:’Employee3'}
];
}
trackByEmpId(index:number,employee:any):string{
return employee.empid;
}
}

employee-detail.component.html

<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Date Of Birth</th>
</tr>
</thead>
<tbody>
<! — employees property contains array elemt of employees which defined in TS file
employee is template input variable which is accessible by tr element and any of its child element →
<tr *ngFor=”let employee of employees”>
<td>{{employee.empid}}</td>
<td>{{employee.name | uppercase}}</td>
<td>{{employee.dob | date:’fullDate’ | uppercase}}</td>
</tr>
</tbody>
</table>
<br/>
<button (click)=”getEmployee()”>Refresh List</button>

Angular Custom pipe

Custom pipe in angular used when user want some operation to be carried out using pipe for better let's consider one example was the based on employee salary we are appending designation with the employee name,

Steps to implement custom pipe includes creating a class with the operation you want to perform,

employeeName.pipe.ts

import { Pipe,PipeTransform } from ‘@angular/core’;
@Pipe({
name:’EmployeeName’
})
export class EmployeeNamePipe implements PipeTransform{
transform(value:string,salary:number):string {
if(salary<=100)
{
return value+”- Employee”;
}
else
{
return value+”- Manager”;
}
}
}

After creating this class declare it app.module.ts

Next step is using a created pipe,

employee-detail.component.ts

import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-employee-details’,
templateUrl: ‘./employee-details.component.html’,
styleUrls: [‘./employee-details.component.css’]
})
export class EmployeeDetailsComponent implements OnInit {
employees:any[];
constructor() {
this.employees=[
{empid:’1',name:’Vaibhav’,salary:100},
{empid:’2',name:’Employee1',salary:200},
{empid:’3',name:’Employee2',salary:300}
];
}
ngOnInit() {
}
getEmployee():void{
this.employees=[
{empid:’1',name:’Vaibhav’},
{empid:’2',name:’Employee1'},
{empid:’3',name:’Employee2'},
{empid:’4',name:’Employee3'}
];
}
trackByEmpId(index:number,employee:any):string{
return employee.empid;
}
}

employee-detail.component.html

<table>
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor=”let employee of employees”>
<td>{{employee.empid}}</td>
<td>{{employee.name | EmployeeName:employee.salary}}</td>
</tr>
</tbody>
</table>
<br/>
<button (click)=”getEmployee()”>Refresh List</button>

Thank You, See you in the next article !!

You can reach out to me here,

LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar

Email: vaibhavbhapkar.medium@gmail.com