Mastering Pipe in Angular by Rohit Sharma

 Overview

In this article,Let's start a mostly asked question in interview of Angular that's Pipe in Angular.
So We are working with little bit deep dive. Below mention topic one by one

1. Introduction
2. How it's work
3. How to create custom Pipe
4. Comparison between Pure vs Impure

 Introduction

When we requirement convert data one format to another format. So angular provide a way for same type transformation through the Pipe.
Example:- 

1. Suppose when we create a record in database that's time stored value like '2025-02-04 20:44:22.549626+05:30' so that's not good way to represent date and time on frontend application. so now we move to transform another format like 'Feb 04 2025 08:44 PM' or '04/02/2025 08:44 PM' etc.
2. Suppose we are working on some calculation part for storing data so we are stored like currency data '20034.4566' now we change into another format like '$ 20,034.45'.

In Angular Pipe is two types.

1. Built-In
2. Custom Pipe

 Built-In Pipe

In Below image assign or initialize the value for demonstrate the Pipes.

Now apply the pipe with help of '|'.

Now we run the application and see the result.

 How is it work

first we need to understand the syntax of Pipe.

{{ value | pipename : arg1 : arg2 }}

it's part of @angular/core. so when ever we use the pipe import the @angular/core.

 How to create custom Pipe

Create the Custom Pipe through Command or terminal.

ng generate pipe pipe-name

OR

ng g p pipe-name