Rxjs combine 2 observables, Angular 2

Question

I have 2 observables, both http calls:

itemList$:Observable<any[]>;
newItem$:Observable<any[]>;

ngOnInit(){
  itemList$ = this.http.getList(...some url...) // returns array of many items
}

createNewItem(){
  newItem$ = this.http.createNewItem(...some url...) //returns array of one item
}

I would like to call the 'createNewItem()' function from elsewhere and I'd like the result to be merged with the current itemList$ observable results to form one array of items.

In the html I have an async pipe thats listening to itemList$:

<div *ngFor="let item of itemList$ | async">{{item.name}}</div>

How can I merge the newItem$ into itemList$ and have the async pipe display the merged results?

muzurB · Accepted Answer · 2017-02-03 19:59:12Z

9

You can use Observable.merge (I have RxJS version 5.0.1)

Observable.merge(newItem$, itemList$)
          .subscribe(response => {
              // Perform your action
          });

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/merge.md

answered Feb 3, 2017 at 19:59

muzurB

3172 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nik Over a year ago

if I use the .subscribe operator then I can't use the async pipe (which handles the unsubscribing automatically).

Phil Over a year ago

then don't use the async pipe but unsubscribe manually in OnDestroy or use the TakeUntilDestroy-plugin with the handy annotation to unsubscribe everything automatically.

Jan B. · Accepted Answer · 2017-02-03 18:44:33Z

1

You could use a Subject instead of Observables. As soon as you create a new item, hand it over to the Subject and emit it.

itemList$:AsyncSubjct<any>;

createNewItem(){
  this.http.createNewItem(...some url...).subscribe(data => {
    this.itemList$.next(data);
}

answered Feb 3, 2017 at 18:44

Jan B.

6,5685 gold badges38 silver badges57 bronze badges

2 Comments

Nik Over a year ago

That seems to be the most common approach as I'm finding out. I thought there may be an operator that combines two Observables without the need for subjects.

Jan B. Over a year ago

Shouldn't muzurBurcu's suggestion work out for you as long as you don't subscribe? I personally like the Subjects since they inherit from Observables and can be used transparently without any overhead.

Collectives™ on Stack Overflow

Rxjs combine 2 observables, Angular 2

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related