CODEWITHSUNDEEP
angularrxjs
Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

How to subscribe to the Observable merged with another Observable?

UPDATE:

Seems I imported Observable from the wrong place... Thats so confusing, because I had this statement import 'rxjs/add/observable/fromevent';...

So I changed from: import { Observable } from 'rxjs/observable'; To: import { Observable } from 'rxjs';

And now get different error:

ERROR TypeError: Invalid event target

End of Update

export class AppComponent { 

  @ViewChild('b') button;

  posts: any[];
  clickStream$: Observable<any>;

    constructor(http: Http){  
       this.clickStream$ = Observable.fromEvent(this.button, 'click').mergeMap(
         () => {
           var randomOffset = Math.floor(Math.random() * 500);
           return http.get('https://api.github.com/users?since=' + randomOffset);
         });
    }  

    ngOnInit() {
      this.clickStream$.subscribe(res => { this.posts = res.json()});
    }
}

Here I get a stream of button clicks, then I want it to merge to other observable from the get method, but with random number at the end of url. So my final goal is to render different list of API users every time button is clicked.

HTML:

<button>Click</button>

<div *ngFor="let post of posts">
{{ post.login }}
</div>

Console error:

ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_rxjs_observable.Observable.fromEvent is not a function

Upvotes: 0

Views: 304

Answers (2)

taras-d
taras-d

Reputation: 1827

Try this:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

Upvotes: 1

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

Not completally sure about everything I done, but seems made it working with:

import { Component, ViewEncapsulation, OnInit, OnChanges, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
import { initializeApp, database } from 'firebase';
import { Observable } from 'rxjs';
import { Http } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 

  @ViewChild('b') button: ElementRef;

  posts: any[];
  clickStream$: Observable<any>;

    constructor(private http: Http){  
    }  

    ngOnInit() {
       this.clickStream$ = Observable.fromEvent(this.button.nativeElement, 'click').mergeMap(
         () => {
           var randomOffset = Math.floor(Math.random() * 500);
           return this.http.get('https://api.github.com/users?since=' + randomOffset);
         });

      this.clickStream$.subscribe(res => { this.posts = res.json()});
    }
}

Upvotes: 1

Related Questions