This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "What are Pipes?" Lesson
[00:00:04]
>> Lukas: [SOUND] So this is going to be an abbreviated module. We’re going to talk about pipes. If you’ve done Angular 1 you know this as filters. We will just cover these, and we’ll see how far I get in the next, I don't know, five to ten minutes. And from there I'll show you a couple of quick examples.
[00:00:24] Everything that I'm going to cover is in the Plunks, onehundredmind.com/fem-examples. And there is an optional homework assignment that you can pull down and play around with. So in a nutshell, pipes simply takes something, transforms it and feeds it out the other end. So, we have actually seen one of my favorite pipes in action for the last few days, and that is pipe Json.
[00:00:58] So, what I'm doing is, I'm taking an object, whatever it may be, and I'm saying, take this in. Transform it into a Json object that I can dump onto the screen. So fairly simple. Another really good one is date I want to take this particular string. It might be some timestamp and I want to transform it into this particular date format to display.
[00:01:25] Another one that I use actually frequently is currency. So it's nice if you have a number. You can say take this number and turn it into something that looks like dollar bills y'all. So we have date, upper case lower case currency. Percent JSON. So Angular comes with some basic ones filled in.
[00:01:51]
>> Lukas: You can also do custom pipes. Now, I bet you can't imagine what I'm gonna say here. If you're going to create a pipe, it is just a class. That you decorate. I, hopefully we're seeing a pattern here. So I'll show you what this looks like in just a second.
[00:02:09]
>> Speaker 2: I thought you were gonna say crack pipe or something.
>> Lukas: Yeah. Well, I'm just resisting, just let that joke go. Just let it go. All right, now for the perfect segue into tomorrow. We have, and this is my all time favorite, the asynchronous pipe. And what this allows us to do is bind to an observable or a promise.
[00:02:39] And when the data comes in, your template will go ahead and resolve that and display it. And so now you can say that I want to bind to this particular thing some time in the future. And so this is really nice when you're using the HTTP service and you're saying hey, go get this thing.
[00:02:59] And when it resolves, I'm gonna just bypass my really, my component for the most part. You don't have to stop and do like dot subscribe this. When this comes in, assign this value to something local. So what that allows you to do is pretty much bypass local state and you can bind to the result directly.
[00:03:18] We'll talk about this more tomorrow, but this is really, really important. Because now with HTTP we're turning an observable, you can say when this thing comes in, go ahead and display it in my template using the asynchronous pipe. Or, if you're using NGRX store, who's also returning an observable, you can say, when this thing updates in the store, it's just gonna propagate through the component right to the template, and update.
[00:03:50] And so now you're state and it's mutations happen in a single place and it just reactively responds through the application. So Asyncronous Pipe, it will change your life.