Render an Observable with the Async Pipe

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet

Angular 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 and then to render it out in the template.

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

Simon
Simon
~ 5 years ago

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

jolmari
jolmari
~ 5 years ago

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?

William Grasel
William Grasel
~ 5 years ago

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?

Jesse
Jesse
~ 5 years ago

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

themathmagician
themathmagician
~ 4 years ago

Looks like the Plunker link og github is wrong ?

themathmagician
themathmagician
~ 4 years ago

Ok, found a working link to gist here: https://github.com/johnlindquist/rxjs-in-angular2 The plunker link on the lesson itself is wrong: https://github.com/eggheadio-projects/angular-rxjs-time-machine/tree/angular-2-rendering-an-observable-with-the-async-pipe

Tom Stones
Tom Stones
~ 4 years ago

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)

Jesse
Jesse
~ 4 years ago

@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.

technokon
technokon
~ 4 years ago

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

Suhail Taj Shaik
Suhail Taj Shaik
~ 4 years ago

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

Kevin Pinny
Kevin Pinny
~ 4 years ago

I'm probably super late for this one, but I just throw it out here for anyone who is wondering. I was wondering the same thing. Behind the scenes what | async does is subscribing to the observable to the observer sees values passing by. Unsubscribing is handled by Angular 2, so you won't need to worry about that.

It behaves exactly like a normal subscribe and subscribe means, start the execution. This implies that when using the async pipe on the same observable in multiple places is that you start multiple separate executions, which all of them will call the API (resulting in multiple API calls). Whenever you want to share the execution between multiple observers, a Subject should be used.

Rasih
Rasih
~ 4 years ago

Hi. How should webstorm configured to complete rxjs interval import as in the video ?

I followerd these but it does not worked

In Webstorm

  1. Go to Languages & Frameworks under settings
  2. Select Javascript - > Libraries
  3. Add
  • Name : rxjs
  • Frameworktype : node_modules
  • Visibility : Project
  • Attach directory - select rxjs folder under node_moldules folder
  • Attach files - add files under rxjs folder

Other thing is there any Webstorm configuration lesson for Angular ?