What are observables in the Angular

Angular uses the observables for the event system and HTTP service. Observables are nothing but lazy collections of multiple values over time. These are lazy such as, as you can think of newsletters. For every subscriber new newsletter is created. Then those are only sent to people, and not to everyone. Observables can have multiple values over time like if you keep a subscription to letters open, you, ll get a new letter every once and while. Sender decides that when you get that letter it just all you have to wait until it comes in your box. Another thing is the observables are cancelable. 

Push vs Pull

The important thing to keep in mind is while using observables are that observables push. Push and pull are different paths that describe how data producer can communicate to the data consumer.

Pull

While the pulling process, data consumer sees when will it get data from the data producer. On another hand, the producer is completely unaware of when data will be delivered to the consumer. Each javascript function uses the pull. Functions are the producer of data, and code that makes a call is the function consuming it by "pulling" out single return value from calling. 

Push

When it comes to pushing, it works in a different way. Data producer decides when will the consumer will get data. Promises are the most used way of pushing data in javascript. Promises are used for delivering a resolved value to registered callbacks, but just like the functions, promises are considered the charge for determining when will be the value be "pushed" to callbacks. Observables are considered a different way for pushing multiple values to the subscriber.

Observables in Angular

We create a simple HttpClient with the name of fetchUser() method that will return observable. We'll like to display users in sort of list. In angular, there are two ways for subscribing observables.

Manner 1

The first way of subscribing observable is using the async pipe. The advantage of using it is that it deals with subscription during the lifecycle of the component. Angular automatically subscribe and unsubscribe it. Import "Common module" in your module.

import { Component } from "@angular/core"
import { Observable } from "rxjs/Rx"

// client
import { HttpClient } from "../services/client"

// interface
import { IUser } from "../services/interfaces"

@Component({
    selector: "user-list",
    templateUrl:  "./template.html",
})
export class UserList {

    public users$: Observable

    constructor(
        public client: HttpClient,
    ) {}

    
    // the fetchUsers method returns an observable
    public ngOnInit() {
        this.users$ = this.client.fetchUsers()
    }
}

Manner 2

We used to subscribe observables ourselves using subscribe() method. This comes in handy when you first do something with data before displaying it. 

import { Component } from "@angular/core"

// client
import { HttpClient } from "../services/client"

// interface
import { IUser } from "../services/interfaces"

@Component({
    selector: "user-list",
    templateUrl:  "./template.html",
})
export class UserList {

    public users: IUser[]

    constructor(
        public client: HttpClient,
    ) {}

   
  
    // in our callback
    public ngOnInit() {
        this.client.fetchUsers().subscribe((users: IUser[]) => {

            // do stuff with our data here.
            // ....
            
           
            this.users = users
        })
    }
}

It will be recommended to use the manner 1 because it is the easiest way and we don't need to manage it manually.

How to create observable manually

The simplest way to deal with observables is given by angular.

import { Observable } from "rxjs/Observable"

// create observable
const simpleObservable = new Observable((observer) => {
    
    // observable execution
    observer.next("bla bla bla")
    observer.complete()
})

// subscribe to the observable
simpleObservable.subscribe()

// dispose the observable
simpleObservable.unsubscribe()

As we'll see in example observables are get created using new observable() call, then subscribe it by the observer, and executed by calling that via next() and dispose of it by calling unsubscribe().