One TypeScript / Angular 2 code health recommendation at Google is how to simplify dealing with RxJS
Observables. Two common options in Angular are subscribing to an
Observable inside of a Component's TypeScript code, versus using something like the
foo | async) from the template html. We typically recommend the latter for most straightforward use cases (code without side effects, etc.)
I typically review a fair amount of Angular code at work. One thing I typically encourage is using plain
Observables in an Angular Component, and using
foo | async) from the template html to handle subscription, rather than directly subscribing to an observable in a component TS file.
Subscribing in components
Unless you know a subscription you're starting in a component is very finite (e.g. an HTTP request with no retry logic, etc), subscriptions you make in a Component must:
- Be closed, stopped, or cancelled when exiting a component (e.g. when navigating away from a page),
- Only be opened (subscribed) when a component is actually loaded/visible (i.e. in ngOnInit rather than in a constructor).
AsyncPipe can take care of that for you
Instead of manually implementing component lifecycle hooks, remembering to subscribe and unsubscribe to an Observable,
AsyncPipe can do that for you.
#Typescript #Angular #RXJS #Async #Frontend