What is observable, observer and subscribe in angular?

angular rxjs angular6 rxjs5
Amit Sharma picture Amit Sharma · Jul 25, 2018 · Viewed 12.7k times · Source

I am learning angular and i got confuse in these observable, observer and subscribe thing. So please explain.

Answer

DeborahK picture DeborahK · Jul 25, 2018

Here is a simple visual to see the difference:

enter image description here

As seen above ... an Observable is a stream of events or data. They are often returned from Angular methods, such as the http.get and the myinputBox.valueChanges.

Subscribing "kicks off" the observable stream. Without a subscribe (or an async pipe) the stream won't start emitting values. It's similar to subscribing to a newspaper or magazine ... you won't start getting them until you subscribe.

The subscribe method takes in an observer. An observer has three methods:

  • The method to process each time an item is emitted from the observable.

  • The method to process any error that occurs.

  • The method to clean up anything when the observer completes. This last one is seldom used when working with Angular's observables.

Hope this helps.

(And I agree ... trying to see the forest through the trees of the docs is quite a challenge. I understand they are working to improve them.)

Related questions

Angular - "has no exported member 'Observable'"

Typescript code: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { Hero } from './hero'; import { HEROES } from './mock-heroes'; @Injectable({ providedIn: 'root' }) export class HeroService { constructor() { } getHeroes(): Observable<Hero[]&…

Read More
Angular 6 router.events.filter 'filter' does not exist on type 'Observable<Event>'

I have finished to update my App to Angular 6 (it was in 5.2 version). I got an error syntax in : import { Router, ActivatedRoute, NavigationEnd } from '@angular/router'; import { filter } from 'rxjs/operators'; ... constructor(private router: Router) {} this.router.events.filter (…

Read More
Angular 6 - run method in service every 10 seconds

I have this service using HttpClient to get some data : checkData() { return this.http.get('my url'); } The on the footer component I call it and display the result : ngOnInit() { this.myservice.checkdata().subscribe( result => { this.statustext = result } ); } This …

Read More