Understanding Async Pipe in Angular 4

What are Pipes?

Piper is a feature built in Angular 2 which basically allows us to transform output in our template. This is the main purpose of the pipe that it transforms the output. There are pipes for different types of output and also for synchronous and asynchronous data. Let’s take a simple example of a username property which we are outputting somewhere using string interpolation like this - <p>{{ username }}</p> and we want the output should be all uppercase but only when you output it. So, we don’t want to change the property itself in uppercase but we want to change the way it is displayed when we render it to the screen. For this, we can use a pipe namely the uppercase pipe like this-

<p>{{ username | uppercase }}</p> which is actually a built-in pipe. So, by using this pipe we will see the username all displayed uppercase on the screen because this is what it does i.e. it transforms the value.

Using the “ async ” Pipe ?

There is another built-in pipe in Angular 2 which does something different from all other pipes i.e. it help us to handle the asynchronous data. To demonstrate how this Pipe works, let’s say we have a property named appStatus in our app.component.ts file which may hold the status of our app( which may br stable, offline etc ). Now, this appStatus property will not be a string instead it should get loaded after let’s say two seconds and to simulate this we will set this equal to a Promise(). Inside this Promise() there will be a callback function in which we will setup a setTimeout() method which will trigger after two seconds. So in this setTimeout() method we will resolve our Promise() and set the appStatus property to ‘stable’ which is a string.

Now, if we try to output the appStatus in our template using string interpolation like this -

 <h2> App Status :  {{ appStatus }} </h2> , it will display something like this - App Status : [ object Object ] and this is correct because it is a Promise() and a Promise() is an Object but after two seconds we know it is no longer an Object and it must now display a string i.e. “ stable ” but it doesn’t. The reason for this is that it doesn’t watch for our Object ( i.e. Promise() ) and it doesn’t check if our Object transforms to some value or return us something and it is a good behavior of Angular as it saves a lot of performance issues. To produce the result as expected we can use the “ async ” pipe by just adding the pipe symbol in the template where we are outputting the data like -

<h2> App Status :  {{ appStatus | async }} </h2> and by adding it we will get the desired output of “ stable ” after two seconds. This is what “ async ” does i.e. it recognizes that it is a Promise() and after two seconds it will recognize that the Promise() changed and it will resolve the Promise() to a string which we want to output. Moreover, we can also use this Pipe while working with Observables, there it will subscribe automatically and it will recognize that the data sent to the subscription and it will print this data to the screen.