Angular observable with an example in Angular 12

Rxjs Observable is most basic building block of RxJS that represents an event emitter, which will emit any data received over time. Angular Observable object definition will not cause a networking event to be fired unless it will not subscribe or listen, as observable are lazy in nature.

By calling Angular subscribe on the Observable, you’re essentially attaching a listener to the emitter. You’ve implemented an anonymous function within the subscribe method, which will get executed whenever a new piece of data is received and an event is emitted.

Angular observable example
Angular observable example

Setting up and configuring Angular observable project

Angular HttpClient with RxJS Observable example to access local JSON data. Most front-end applications communicate with backend services over the HTTP protocol. Modern browsers support two different APIs for making HTTP requests:

  1. XMLHttpRequest interface
  2. fetch() API.

Step 1: Create Angular observable example project
Let first create angular observable example project by running following command.

ng new observableApp
cd observableApp

Step 2: Import HttpClientModule in the app.module.ts file

The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. HttpClient service to fetch data from online REST APIs and return it as an Observable object/array. Upon any data event, the subscribers of observable will react.

Here is a screenshot of Angular observable example to retrieve data using observable.

Angular Observable example
Angular observable example

We have to follow this step to set up HttpClient in our Angular project.

Step 1: Import HttpClientModule in the root module
Import HttpClientModule module from @angular/common/http package and add it’s an entry in the import attribute of @NgModule.

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
....
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
	...
  ],
  bootstrap: [AppComponent]
})
export class AppModule

Step 2: Create an employee model to create an observable type so we can have autocompleted and reduced errors in our code.

export interface IEmployee {
    name: string;
    company: string;
}

Step 3: Add dummy JSON employee data in assets/data/employees.JSON

[  
    {"name":"Ram", "company":"Google"},  
    {"name":"Bob", "company":"EMC"},
    {"name":"Ram", "company":"Google"},  
    {"name":"Bob", "company":"EMC"},
    {"name":"Ram", "company":"Google"},  
    {"name":"Bob", "company":"EMC"}  
]

Step 4: Create Observable service
Inject HttpClient in service constructor and create employee service to access employee data in our application using observable rxjs. Lets first generate employee service

ng generate service employee

HttpClient is Angular’s mechanism for communicating with a remote server over HTTP. All HttpClient methods return an RxJS Observable in angular of something. In general, an observable can return multiple values over time. An observable from HttpClient always emits a single value and then completes, never to emit again.

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

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  constructor(private httpClient: HttpClient) {}

  getEmployees(): Observable<IEmployee[]> {
    return this.httpClient.get<IEmployee[]>('./assets/data/employees.json');
  }
}

Step 5: Create an observer which subscribes to Observable
In our angular project, we will create a subscriber in the component file. It will read the data from the observable array and assign it to the model attribute. The model attribute can be used to map data from UI.

import { Component, OnInit } from '@angular/core';
import { IEmployee } from './employee.model';
import { EmployeeService } from './employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  employees: IEmployee[];
  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
    this.employeeService.getEmployees()
    .subscribe((data: IEmployee[]) => {
      this.employees = data;
    });
  }
}

As observable by definition will not invoke, until Angular subscribe our observable. We had to add Angular subsribe on getEmployees() method of employee Service.

Step 6: In view, we will render our employees array as

 <div *ngFor="let employee of employees">
	<h4>{{ employee?.name }}</h4>
	<h4>{{ employee?.company }}</h4>
</div>

observable vs promise

In Angular applicaiton we have to use observable and promise extensively to perform asyncrhonouse activities. Here we have listed difference between Observable and promise.

Observable Promise
An Observable is like a Stream and allows to pass zero or multiple events over period of times.Promise handles a single event when an async operation completes or fails.
Observable also has the advantage over Promise, as observable can be cancellable.Are not cancellable.
Observable only starts if we subscribe to it. This is why Observables are called lazy.While a Promise starts immediately after it creation. Are not lazy.
Observable provides operators like map, forEach, reduce, pipe and more. This is because of obervable lazy in nature, allows us to build up a chain of operators before the observable is executed by subscribing, to do a more declarative kind of programming.Don’t provide any operations like map, reduce, and pipe
Angular Observable vs Promise

How to convert promise to observable

In an Anglular we can easily convert promise to observable and here we had demonstrate an example. You can convert it to based on your requirement.

getProducts(page: number): Observable<any> {
  return new Observable((observer) => {
   this.wooCommerce.getAsync('products').then((data) => {
     observer.next(JSON.parse(data.body));
     observer.complete();
    }).catch((error) => {
       console.error(error);
       observer.error();
    });
  });
}

To check more information on the angular service on the official documentation site.

Related Post

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top