Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Pipe Demonstration" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Lukas wraps up the course by sharing a few pipe code examples. He also sets the stage for the next course by talking about RXJS and sharing the rxmarbles.com website.

Get Unlimited Access Now

Transcript from the "Pipe Demonstration" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Lukas: So pipes and the plunks, we just have this basic one where we have this object that we're just going through and binding to. So we have items and a couple of different things, and we're just using Pipe to transform. So it goes in one way and it comes out another way.

[00:00:28] So currency, percent, decimal, and my favorite, the Jayson Pipe. And how you make this work is Pipe the pipe that you want to use and then in the case of currency you have some additional options too. You could say USD or GBP for Great Britain Pound, or I think it's whatever the Euro is etcetera.

[00:00:55] And also a number, you could set like a decimal place. And so on. So this is the built-in pipes, pretty easy to use documentation. Read the options. You're good to go. Now creating a pipe,
>> Lukas: Just unbelievably simple. So we're creating a pipe called reverse pipe and we are going to implement pipe transform.

[00:01:27] So this is the interface that we're doing. So that's why you have this transform method here. And it takes a value, in this case, we're splitting, reversing and joining. So this just standard Java Script. We're decorating it with the pipe decorator and we're saying give this the name of reverse.

[00:01:50]
>> Lukas: And then from here we're importing reverse pipe forward string Pipe reverse.
>> Lukas: You can see the results at the bottom. Just, mainly, so this is,
>> Lukas: There we go. Now it's a little higher up in the screen, I saw somebody kind of like, where is that?
>> Lukas: So it's just a class that implements pipe transform as a transform method that takes a value, you can also pass it an argument to determine how something is transformed.

[00:02:32] Then you need to return a value. So it's just very functional in a sense of it takes something in and it returns something out. And then you just import it like everything else and you can use it in your. This will get you. Make sure you add this into your pipes decorator.

[00:02:56]
>> Lukas: And so it's not a provider or directives, but it's pipes. One more final demo. Whirlwind demo here. For a sync pipe I have an array of items. And I am creating a property called asyncItems that is an observable and I'm saying, create this observable and just use the observable of method.

[00:03:30] So what that does is it just takes initial value and returns an observable with that. So we will talk about observable Or rxjs operators, more tomorrow, but for the most part, it's just taking this array, wrapping the observable around it, and returning it. Now, from here, we are saying, take this, and asynchronously bind to this, and then turn it into JSON.

[00:04:02] So, in this particular case, we're not really seeing the asynchronous nature of it, but this could come from anywhere. So I could easily extract this into a service, and then just pass this in this observable, and using async. Then angular knows with the async pipe, take the observable when it gets a next event fire go ahead and take that result and render it in the.

[00:04:34] And this is exactly where we will pick up tomorrow is how to cause observables to flow through our entire application and consume them in our DOM. So any questions on that? I think we started with component routers which was really hard this morning. Scott, excellent job. And then we finished with something that's actually pretty easy, pretty straight forward, but if anybody has any questions about what's happening here, you could check out the plunks or I believe, for the most part they are up to date on the repository.

[00:05:13] Any questions? Any burning questions in your heart about, what does life mean? How do you do your, how do you solve this calculus problem? Whatever. I mean, I'm here for you. Yes.
>> Speaker 3: Isn't there more about observables? I can't find the word, observable, more than once on that angular IO page.

[00:05:37]
>> Lukas: Fun. Yes.
>> Lukas: I appreciate the efforts of the angular team. And their documentation. I can say. As it is, it's a thousand times better than the angular one documentation was for the longest time.
>> Speaker 2: [INAUDIBLE]
>> Lukas: I'm getting there, just hang on.
>> Speaker 2: RX list?
>> Lukas: Yes.

[00:05:58] So, this is to learn observables, and this why we did not have a stand alone observables module in these two days. Because the observable object itself is really, really boring. It just doesn't really do anything. It just next, error, complete. But where it gets really interesting. Is when you start to add in the reactive extensions.

[00:06:23] And actually we go to this.
>> Lukas: And so, if you really want to dig into observables as it pertains to angular two, start learning the rxjs operators. And so this took me a little bit to kind of figure out what I was looking at, but for instance this is the merge method and you can actually kind of drag these around.

[00:06:55] And it just, all it's doing is taking these two basically collections and it's just merging them together. Map takes the stream, runs this operator on it and applies this method. So it's just looping through and multiplying everything by ten. I think my wife is calling me I got to go.

[00:07:22] Just kidding. She can wait. CombineLatest, I'm going to give you just a little hint of the promise land. CombineLatest is probably one of the most amazing, powerful operators that you can use in angular two. We'll see why tomorrow, but this is how you start to learn observeables is by learning actually the reactive extensions that are built into it.

[00:07:50] With that said there are like 130 or 150, and that's actually where the angular core team has actually pulled out rxjs and you actually have to add them in by piecemeal. So you can add them in all at once, which I tend to do if I'm just testing something, but if I were going into production then I would add in those operators in one by one as you saw Scott do.

[00:08:16]
>> Lukas: But yes, I apologize that there's very low documentation about observables. You'll find that actually on the rxjs site or even just the standard rx sites. So active extensions is language agnostic. There's Java, there's a ton of implementations for it. And so I've actually learned quite a bit about observables just from reading the right to extensions websites.

[00:08:40]
>> Speaker 4: There're some great YouTube talks, too. That’s where I first got exposed to it.
>> Lukas: Yes.
>> Speaker 4: Jafar’s talk.
>> Lukas: Jafar is phenomenal. Paul Taylor has done a really good talk. He worked with Jafar at Netflix for some time. Ben Lesch actually did a really good post about how to actually write an observable from scratch.

[00:09:01] And Egghead has some really good videos as well about rxjs.