search

JeroenRombouts / ngrx-store-with-angular-cli

step by step recreation of the app from https://gist.github.com/btroncone/a6e4347326749f938510#walkthrough but with angular cli instead of Plunker. Each branch is a step.
0 stars 1 forks source link

change to using async pipe part one #4

Closed JeroenRombouts closed 7 years ago

JeroenRombouts commented 7 years ago

The AsyncPipe is a unique, stateful pipe in Angular 2 meant for handling both Observables and Promises. When using the AsyncPipe in a template expression with Observables, the supplied Observable is subscribed to, with emitted values being displayed within your view. This pipe also handles unsubscribing to the supplied observable, saving you the mental overhead of manually cleaning up subscriptions in ngOnDestroy. In a Store application, you will find yourself leaning on the AsyncPipe heavily in nearly all of your component views. For a more detailed explanation of exactly how the AsyncPipe works, check out my article Understand and Utilize the AsyncPipe in Angular 2 or free egghead.io video Using the Async Pipe in Angular 2.

Utilizing the AsyncPipe in our templates is easy. You can pipe any Observable (or promise) through async and a subscription will be created, updating the template value on source emission. Because we are using the AsyncPipe, we can also remove the manual subscription from the component constructor and unsubscribe from the ngOnDestroy lifecycle hook. This is now handled for us behind the scenes.