MCQ

Observable in Angular

The Observables in Angular, a popular framework and a platform in Javascript using which you can build tremendous single-page client-side applications using the bootlegs of Typescript and HTML. It is primarily coded in Typescript, a superset of Javascript that lets you import core and optional features in your apps. Thus, before going any further on the implementation of Observable in Angular, let's just dive into understanding what observables are.

Observable in Angular is a feature that provides support for delivering messages between different parts of your single-page application. This feature is frequently used in Angular because it is responsible for handling multiple values, asynchronous programming in Javascript, and also event handling processes.

However, an observer or observable is a software paradigm constituting the design of an object which is called a subject that maintains a list of various dependencies that are called observers. These dependencies are automatically notified whenever you try to change states.

Nature of Observable

Observables in Angular are generally declarative i.e., if you ought to define a function for value publication. It won't be executed until and unless it is subscribed. The subscriber is termed as a consumer who receives the notifications until the function completes itself or until they manually unsubscribe.

An observable can be used to deliver any type of multiple values be it literal events, messages depending upon the context provided. The receiving and delivering values are synchronously or asynchronously the same. Since the setup and breakdown are handled by the observable, you don't need to worry about your application code being subscribed to consumer values or unsubscribed. Be it an HTTP response or a timer of intervals, the interface for listening to events and stopping them will be the same. This adds an advantage of making use of observables frequently for development purposes.

Usage

The basic usage of Observable in Angular is to create an instance to define a subscriber function. Whenever a consumer wants to execute the function the subscribe() method is called. This function defines how to obtain messages and values to be published.

To make use of the observable, all you need to do is to begin by creating notifications using subscribe() method, and this is done by passing observer as discussed previously. The notifications are generally Javascript objects that handle all the received notifications. Also, the unsubscribe() method comes along with subscribing () method so that you can stop receiving notifications at any point in time.

Consider the below example constituting geolocation updates whenever a subscriber subscribes.

Creating an observable

const locations = new Observable((observer) =>
 {
let watchId: number;

Making API integration to check values

if ('geolocation' in navigator) {
    watchId = navigator.geolocation.watchPosition((position: Position) => {
      observer.next(position);
    }, (error: PositionError) => {
      observer.error(error);
    });
  } else {
    observer.error('Geolocation not available'); }

Data is ready for cleanup for next subscription using the below command.

return {
    unsubscribe() {
      navigator.geolocation.clearWatch(watchId);
    }
  };
});

Now, use subscribe() function for getting continuous updates using the below code:

const locationsSubscription = locations.subscribe({
  next(position) {
    console.log('Current Position: ', position);
  },
  error(msg) {
    console.log('Error Getting Location: ', msg);
  }
});

Set the time intervals for 5 seconds which the notifications will be stopped automatically through the help of API integration. Consider the below code for reference.

setTimeout(() => 
{
  locationsSubscription.unsubscribe();
}, 
5000;

Types of Notifications and Description

Next: It is called after the execution starts for zero times or more than that. It is a mandatory notification for catching each value delivered.
Error: This is an optional handler for chasing error notifications. This notification halts execution while running instances of observable.
Complete: It is an optional handler that notifies completion of executions. The currently delayed values continue to be delivered even when the execution is marked as complete.

Summary

In this article, we learned the Observables from scratch and saw through an example how a subscribe() and unsubscribe() method works in a real-life geo-location application. We also came across various methods constituting the API integration techniques through which the time interval can be defined. Moreover, we came across various types of notifications along with their description which is specifically used whenever the subscriber subscribes or unsubscribes with the help of Observable.

Next TopicBootstrap Modal Popup in Angular 9/8

← prev next →