What is observable, observer and subscribe in angular?

Question

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

Answer 1

Here is a simple visual to see the difference:

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.

(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.)

Answer 2

Trying to explain with a really simple example:-

1. Observable is like a youtube channel of someone else. (( It uploads new videos(data) from time to time, so it is a data source for you))

2. Your youtube account is an Observer

3. Your youtube account (Observer) can only get notifications about whether someone else's youtube channel (Observable) has uploaded a new video (has new data) or made a livestream (new event) only if you have subscribed to that channel

(Observer subscribes Observable to listen for new data/any event)

where observable is a data source, subscribe is like a method/function , Observer is generally on your side

Answer 3

An Observable can be thought of as various data sources(ex: (userInputs)Events, HttpRequests etc).

here creating our custom observable.

    var observable = Observable.create((observer: any)=>{
       observer.next("Hii")
       observer.next("how are you")
       observer.complete()
    observer.next("This will not send to observer")
});

• next() used to emit values to observer
• complete() indicates that completion of observable is notified.

An Observer is basically who subscribes to Observable.

observable.subscribe(
    (data: any) => console.log(data), // for handling data
    (error: any) => console.log(error), // for handling error
    () => console.log('completed'); // for handling completion

);

Here you can learn more about Observable http://reactivex.io/documentation/observable.html

Answer 4

Here is some key points :

1) Definition: "Observable and Observer" is a pattern of message passing from publisher to subscriber.
2) Flow of functionality:

• Observable is created

• Observer subscribe to Observable

• Observable can pass message to observer
• each time, when the observable passes a not a message it is received by Observer

3) Real-time usage of Observable and Observer

• While receiving response from AJAX
• While performing large tasks in client(browser)