AngularFire2 Observer

Question

The AngularFire2 documentation demonstrates the following pattern to bind an observer to your Firebase observable:

this.item = af.database.object('/item');

{{ (item | async)?.name }}

The async pipe unsubscribes when the component is destroyed, but what are the advantages/disadvantages of using the following pattern instead? And unsubscribing in the lifecycle hook ngDestroy?

af.database.object('/item')
.subscribe(item => this.item = item)

{{ item?.name }}

Answer 1

Advantage: You can directly display the list to the template without subscribing it. It will save you time referencing it to a property. This pattern is used not only in AngularFire2 but in Angular 2 also. This is how Observable works.

Disadvantage: You can't manipulate the data within since you already displayed it directly. If you want to change something to the properties you need to use a pipe which take you time to create the logic.