How to use rxjs Observables in multiple Components in Angular 2

Question

For a mindmap-like learning app all elements (lines/text) are placed via different Components in the view. The data is fetched from a database and saved in an ObservableArray if it's in the view. There are two distinct kind of changes: 1. scrolling, the view changes and new data is fetched; 2. the user changes/adds/deletes an element in the view (no new data is fetched).

Is it better to "read" the observable to an ObjectArray iterate it with *ngFor, passing each Object to the matching Component or only pass an array of ids and letting each Component subscribe to the matching Element inside the ObservableArray?

So far I am using the first approach that I've seen in many tutorials and examples but using the second would make the user changes much easier and only the relevant elements would be change detected.

This might be helpful as well http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in — Günter Zöchbauer, Oct 14 '16 at 06:10

score 1 · Answer 1 · answered Oct 14 '16 at 06:05

I think first way is still better. On optimization side you can use trackBy feature of *ngFor

<div *ngFor="let item for (items | async); trackBy: item?id">
  <item [item]="item"></item>
</div>

This assumes your item has an unique id. This will ensure each item element will not be rendered again. Additionally set changeDetectionStrategy of the item component as OnPush. So, the item components change detection will be fired only when the input , i.e. item changes.

Basically item component should be dumb (presentational) component, which only displayed the item data.

How to use rxjs Observables in multiple Components in Angular 2

1 Answers1