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

employee-detail.component.html

<table>

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

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

employee-detail.component.html

<table>

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

Technical Speaker | Computer Engineer | Full Stack Web Developer | ML Enthusiast | * Knowledge Shared = Knowledge² *