PIPES IN ANGULAR 11

deepachaurasia1

Deepa Chaurasia

Posted on April 12, 2022

PIPES IN ANGULAR 11

WHAT ARE PIPES???
Pipes are a feature built in Angular 2 which allows you to transform output in your template

Example: You have a property username='deepa'

*You want to write your name in uppercase only in output on template *

**

  • You don't wanna change property in yout ts .

  • You want to transform the way it is rendered on screen**

For this you could simply use uppercase pipe, which is a built-in pipe

Like this:
Image description

Now your username will show as :'DEEPA' in the output.****

Parameterizing Pipes

Suppose you have date in format "8 April,2022".
*You don't want this format ,You want to customise it according to your requirement *

You can do it using parameterised pipes

In ts file you will define an object students like this:
Image description

Now in your html file you will add parametrized pipe like this

Image description

here " |date:'fullDate'" represents parametrized pipe.

Output will look like this
Image description

you can refer https://angular.io/api/common/DatePipe for more details

Chaining Multiple Pipes

Image description

Here order in which we write pipe matters because it iterates from left to right

  1. First fullDate will be applied
  2. On the result (i.e Monday, April 12, 2022) Uppercase will apply 3.And it will become 'MONDAY ,APRIL 12,2022'.

Creating a Custom Pipe

  1. First, create a ts file pipename.ts

Now your pipe.ts should look like this

Image description

Here you can see an example of custom pipe.
Important points to note

  • It implements the PipeTransform interface which is important.

  • transform method is compulsory in your pipe and all the logic will go inside this method only.

  • @Pipe({name:"youpipename"}) is important or it will throw error.

Here's my small explaination about pipes in Angular
If you like it please like share and comment

💖 💪 🙅 🚩
deepachaurasia1
Deepa Chaurasia

Posted on April 12, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Angular: Binding end to end
javascript Angular: Binding end to end

August 9, 2022

PIPES IN ANGULAR 11
javascript PIPES IN ANGULAR 11

April 12, 2022

What are Modules in Angular?
javascript What are Modules in Angular?

March 16, 2022

Angular Developer Roadmap
angular Angular Developer Roadmap

October 18, 2021