Pipes in Angular

In this section, we are going to talk about pipes. Pipes are the features to transform the output in your template. My simple app around the same looks like this.

And,

With the following change in place, my app currently looks like

Now, at this instant, I would like to print designation in uppercase and date also in normal form. With the below change,

It will print like So, the pipes which I have used so far are built in pipes. Now, let’s see how to configure the pipe. Let’s say, I would like to print full date,. In that case, I can write like

Here, I have parameterized pipe. Now, these options of configuring the pipes, we can explore more on angular page. Having said that, it will now appear like

Below, I have mentioned the documentation path where you can find pipes in detail.

Link:- https://angular.io/api?query=pipe

Here, you can find all the built in pipes and their usage like shown below.

Therefore this is the place where in you can find multiple examples and their usages. Now, let’s see how to chain pipes. Let’s say, we would like to print date also in uppercase. In that case, we can do like shown below.

With the above change in place, it comes like However, if you refer to pipes documentation carefully, you will notice that pipe ordering is also important. Let’s say, I say like this. Here, I first done uppercase and then date, then it will print below error. Sometimes built-in pipes are not suitable for specific purpose, hence you can create your own pipe. I have added surname in the existing name property. Now, let’s say, we would like to short the name and print the first name and first letter of the second name after space. For that particular case, I have created Pipes folder first under app folder as Then, I have created below snippet in there.

Here, I have done couple of things like first of all imported Pipe and PipeTransform. Pipe is for Pipe decorator and PipeTransform is for transforming the input value. Here, you can pass arguments as well in the function. But, in this context it is not needed. Also, return is mandatory here. Having said that, We also need to include this in app.module.ts file as shown below.

After this, I can go ahead and consume my custom pipe like shown below

With that being said, it will print value like this.

Now, let’s see how to parametrize the pipe. Let’s say, by default I don’t want to cut the name. Upon passing explicit parameters only, I would like to short the same. Below is the small change for the same.

With that being said, If I simply pass shortName as pipe, then it will print full name like shown below. However, if we pass like Then, it will print like Now, let’s go ahead and check async pipe. Let’s say, we have some promise and data is coming after 3 seconds. Below, is the snippet for the same.

And,

With that being said, When I check the app, it will print below stuff

Here, promise is object off-course,but after 3 seconds, it should transform to string. Now, in order to tell angular to transform the output. We need to make use async pipe. With the below change in place, it will print correct value after 3 seconds.