Angular custom pipe - vTomb

Angular custom pipe

People & Blogs
Howto & Style
News & Politics
Science & Technology
Film & Animation
Autos & Vehicles
Nonprofits & Activism
Travel & Events
Pets & Animals

Text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.


Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss creating a Custom Pipe in Angular. Let us understand this with an example.

Here is what we want to do. Depending on the gender of the employee, we want to display Mr. or Miss. prefixed to the employee name.

Step 1 : To achieve this let's create a custom pipe called employeeTitlePipe. Right click on the "employee" folder and add a new TypeScript file. Name it "employeeTitle.pipe.ts". Copy and paste the following code.

Code Explanation :
1. Import Pipe decorator and PipeTransform interface from Angular core

2. Notice "EmployeeTitlePipe" class is decorated with Pipe decorator to make it an Angular pipe

3. name property of the pipe decorator is set to employeeTitle. This name can then be used on any HTML page where you want this pipe functionality.

4. EmployeeTitlePipe class implements the PipeTransform interface. This interface has one method transform() which needs to be implemented.

5. Notice the transform method has 2 parameters. value parameter will receive the name of the employee and gender parameter receives the gender of the employee. The method returns a string i.e Mr. or Miss. prefixed to the name of the employee depending on their gender.

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

name: 'employeeTitle'
export class EmployeeTitlePipe implements PipeTransform {
transform(value: string, gender: string): string {
if (gender.toLowerCase() == "male")
return "Mr." + value;
return "Miss." + value;

Step 2 : Register "EmployeeTitlePipe" in the angular module where we need it. In our case we need it in the root module. So in app.module.ts file, import the EmployeeTitlePipe and include it in the "declarations" array of NgModule decorator

import { EmployeeTitlePipe } from './employee/employeeTitle.pipe'

imports: [BrowserModule],
declarations: [AppComponent, EmployeeComponent, EmployeeListComponent, EmployeeTi...

By using our services, you agree to our Privacy Policy.
Powered by Wildsbet.

© 2022 vTomb

By using our services, you agree to our Privacy Policy.
Got it