You should know about 3 Angular pipes
With Angular 6.1 was released a new pipe: KeyValuePipe. In this article, I’m going to cover this new pipe as well as two others that can be used for multiple purposes.
Json Pipe
Let’s start with a very cool pipe that makes debugging a breeze: The JSON pipe.
You’re probably aware that displaying an object in an Angular expression does not help us much:
![Displaying an object in an expression just renders [object Object]](https://cdn-images-1.medium.com/max/1600/1*B8CmS4Xpq3kCMBQx9xUAgg.png "Displaying an object in an expression just renders [object Object]")
But if we bring the JSON pipe into play, now we’re getting a nicely formatted and helpful output:
Of course, the JSON pipe is mostly helpful for development / debugging purposes, unless your production application uses some JSON rendering, in which case the JSON pipe is exactly what you need.
Async Pipe
The async pipe is the most elegant way to subscribe to an observable in Angular code. On top of being a fantastic syntax shortcut, the async pipe will also automatically unpack your data and unsubscribe from the source observable when your component is removed from the DOM.
First here is what an example would look like without the async pipe:
That’s an awful lot of code to just subscribe to a data source and unsubscribe from it. We have to keep track of the Subscription and implement ngOnDestroy to properly unsubscribe.
Now let’s enjoy the difference that the async pipe makes here:
No more subscription nor unsubscription, we just get our Observable, apply the async pipe to it, and done!
Source code on Stackblitz:
Key Value Pipe
Let’s now see the new KeyValuePipe in action. It is a little bit similar to the json pipe in some ways, as it allows us to turn an object into something that developers can use in a different way.
Here we apply it on an object and then on a map, and what we get as a result is a way to access both keys and values:
Source code on Stackblitz:
Chain pipes to do even more
And if you’re not sure what the KeyValuePipe does, remember that pipes can be chained, so we can use the JSON pipe to see what happens there. Add a tag on top of that and you end up with this nice preformatted output:
I hope you enjoyed these tricks. Pipes are often under-estimated, yet they can bring a lot of value to your Angular applications when used properly.
If you enjoyed this article, please clap for it or share it. Your help is always appreciated.
30s ad
☞ Angular 2 & TypeScript Beginner Web Development
☞ Angular Essentials (Angular 2+ with TypeScript)
☞ Angular 2: From Theory to Practice & FREE E-Book
☞ Build Enterprise Applications with Angular 2
Suggest:
☞ Angular Tutorial - Learn Angular from Scratch
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Angular 5 vs Angular 6 | What's New in Angular 6 | Features & Updates
☞ React + TypeScript : Why and How