What is Observable in Angular and How to use it?

What is Observables?

There are so many questions and doubts regarding Observable in Angular we will cover the main topic step by step.

Here is a more basic question is What is an Observable we will understand in a more basic and brief way.

Observable: Observables are used to move data into an Application, One component to another component, and Client to server and server to the client.

This is the most basic and easy to understand the definition of Observables.

now your concept about observable might be clear. now let’s understand with specific Definitions.

Angular makes use of observables as an interface to handle a variety of common asynchronous operations. For example:

You can define custom events that send observable output data from a child to a parent component.
The HTTP module uses observables to handle AJAX requests and responses.
The Router and Forms modules use observables to listen for and respond to user-input events.

How Observable works in Angular?

The observable behavior follows the programming pattern of an observer which has two main players:

Observable
Observer

The Observable sends data while the Observer subscribes to it to receive the data.

The Observable fires the data in response to an event. For example, when a user clicks a button or in response to data that is received from a remote server.

On the other hand, the Observer has three handles to use the data that it receives:

onNext handles the requested data
onError to handle errors
onComplete which is used when the process ends

How can we get data from the server using Observables?

now will understand with the example, how can we retrieve data from the server using Observables.

Consider the following example for reference:

import { Component, OnInit } from '@angular/core';
import { RestaurentService } from 'src/app/services/restaurent.service';

@Component({
  selector: 'app-restaurent-list',
  templateUrl: './restaurent-list.component.html',
  styleUrls: ['./restaurent-list.component.css'],
})
export class RestaurentListComponent implements OnInit {
  
  restaurentList: any []=[];
  
  constructor(private restaurentService: RestaurentService) {}

  ngOnInit(): void {
    this.readRestaurent();
  }

  readRestaurent(): void {
    this.restaurentService.readAll().subscribe(restaurentdata => {
      this.restaurentList = JSON.parse(restaurentdata.Data)
    }, error => {
      console.log("Error while getting posts ", error);
    });
  }

}

now we need to create services to perform some action here is the example of a service component to retrieve data from a server using Observables and HTTP client.

to connect with the server we need basic requirements like base URL and API EndPoint.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable} from 'rxjs';

const baseURL = 'http://localhost:4400/api/'

@Injectable({
  providedIn: 'root'
})


export class RestaurentService {
  constructor(private httpClient: HttpClient) { }

  readAll(): Observable<any>{
    return this.httpClient.get(baseURL+'Restaurent/getrestaurentlist');
  }
}

This is the Basic Example of the Observables and using this we can perform many actions as per our requirements.

Conclusion

Finally, now with this article, your basic concept of Observable might be clear. and also with help of the given example, you can start your first step into observables. observables are very helpful and interesting in their own way we will discuss further topic later.

Himanshu Kanthariya

Submit a Comment Cancel reply

Subscribe