Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Rendering an Observable with the Async Pipe

2:19 Angular 2 lesson by

Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular 2 and then to render it out in the template.

https://github.com/johnlindquist/rxjs-in-angular2/tree/11aa4c29a4536dad0ef26b78d8f7f503e4372f74/src

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Angular 2 templates use a special Async pipe to be able to render out Observables. This lesson covers the syntax used to create an Observable in Angular 2 and then to render it out in the template.

https://github.com/johnlindquist/rxjs-in-angular2/tree/11aa4c29a4536dad0ef26b78d8f7f503e4372f74/src

Avatar
Simon

How do you setup this and get it up and running? I can't figure it out from the github repo....

Avatar
jolmari

I noticed that if I use the async pipe operator more than once in my local test project template code, I get multiple calls to the API method called. Is there a way to call the async once on an Observable and then store the result for ex. separate *ngFor and *ngIf operators in the same template?

Avatar
William Grasel

What about the tree shaking strategy? It should eliminate the problem of import the whole rxjs library, and then we don't need to import each method every time, right?

Avatar
Jesse

This really needs some documentation on how to get it running. The instructions used for "getting started with angular 2" do not apply here and neither do anything I've found so far in an rxjs course. The NOTES.md file looks promising, starts with 'typings install'. Looking up typings: https://github.com/typings/typings the installation instructions npm install typings --global fails with 'typingsnpm' is not in the npm registry.
:

In reply to egghead.io
Avatar
Jesse

If anyone has gotten this project to run, please share instructions. Thank You

Avatar
themathmagician

Looks like the Plunker link og github is wrong ?

Avatar
Tom

If you are getting the 'exclude' error, hard code the typescript version to 2.0.10.

I then got a 'permission denied' error because the output path was to the root directory (e.g "/build" not __dirname + "/build")

I have submitted a pull request:

https://github.com/eggheadio-projects/angular-rxjs-time-machine/pull/1

( I had to edit this 3 times cos i kept screwing up the directory example.sorry)

In reply to Jesse
Avatar
Jesse

@Tom in your repo, only a couple of files actually clone correctly, but that seems to also be the case in the original version you forked. I ended up downloading instead of cloning the original, and then applying your changes. It worked thanks.

In reply to Tom
Avatar
Jesse

You will need to reference three different git repos to get this working and see the correct gists.

https://github.com/johnlindquist/angular-rxjs-time-machine
is the project, but
https://github.com/johnlindquist/rxjs-in-angular2
has the correct gists listed in the notes.
there are also additional user submitted fixes in a third:
https://github.com/eggheadio-projects/angular-rxjs-time-machine

time-machine repo doesnt clone correctly, perhaps the gitignore excludes everything? so download dont clone:
https://github.com/johnlindquist/angular-rxjs-time-machine
then make changes listed here:
https://github.com/eggheadio-projects/angular-rxjs-time-machine/pull/1/files
npm install
npm start

I got additional errors from awesome-typescript-loader, I think this is because I ran npm-install prior to applying the changes detailed in the fix. I went into node_modules folder of my project and deleted typescript and also awesome-typescript-loader folders, I also did npm cache clean to clear out my global npm cache which may not have been necesarry. then npm install and npm start

In reply to egghead.io
Avatar
technokon

Great lesson!
Why are we binding console to console.log?

Avatar
Suhail Taj Shaik

Can you give me some noted which node modules have you installed for up and running this Project

We're just starting with a "Hello World" Angular 2 app, where we bootstrap an app, and this app is exported from here with a field of message, says "Hello World," and then render it out in the template, so it gives us "Hello World."

To start with our clock, we'll create a field of clock, assign that to Observable. We need to import Observable, which we'll do from RxJS/Observable. We want to import Observable.

We can do Observable.interval. We'll say this is an interval of one second. If I try and run this right now...I'll refresh, you can see I'll get an error saying that interval down here is not a function.

What that means is you need to import every method on Observable by itself, so we'll import interval. When I hit Save and run this again, you'll see that error will go away.

If you wanted to, you could just import all of RxJS by just importing Rx and you can see we won't have an error here. But that imports the whole shebang versus just importing one method off of it, and RxJS can be a pretty big library if you try to and imported everything.

To use our Observable, just our clock, we'll drop it into our template, just say clock, we'll hit Save and refresh, and you might expect to get the clock. But what we get is an object. That's because the Observable we get back is an object.

That object pushes out values asynchronously so we have a pipe called async which can handle that. If we just say pipe and then the word async and we refresh. Now you can see we get zero, one, two, three, every one second, it's incrementing.

What's happening here with this async pipe is that if we do the same thing just in the constructor, if we were to say, this.clock.subscribe, as you would with any other Observable, and then just log out the result, console log and bind it to the console. You'd see that in the console now, it'll log out those same zero, one, two, three.

That's because async and the template is simply doing a subscribe on this Observable and it's rendering out this value, whereas, compared to here with the subscribe it's just logging it out to the console.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?