Web Programming Tip: Observable and Observer in Angular

August 18, 2023

Programming Tips

Caught with intensifying popularity, Angular is a feature-packed and trending framework that enables us to build compelling User Interfaces. Being the most recommended framework by the professionals, Angular helps in building accessibility for the Apps with enthralling Frontends.

In this blog, we will discuss Observable and observer. Observables are elements that will provide us information. In order to get access to information which we need to subscribe to them like Netflix, but free and without the movies.

Using an Observable and an Observer

Observable offers support for passing messages between parts of your application. They are used repeatedly in Angular and are the appropriate technique for event handling, asynchronous programming, and handling multiple values.The pattern of the observer is a software design pattern, in which an object is called the subject keeps a list of its dependents, called observers, and notifies them automatically of state changes. This pattern is alike to the publish/subscribe design pattern.Observables are declarative in that you define a function for releasing values, but it is not executed till a consumer subscribes to it. The subscribed consumer then receives notifications before the function completes, or before they unsubscribeAn Observable can transmit multiple values of any type-literals, messages or events, depending on the context. The API for receiving values is the same either the values are delivered synchronously or asynchronously. The reason is setup and removal logic are both handled by the observable, your application code only requires to worry about subscribing to consume values, and when done, unsubscribing. Either the stream was a shortcut key, an HTTP response, or an interval timer, the interface for getting or listening to values and stopping listening or getting is the same.Due to these advantages, observables are used extensively within Angular and are recommended for app development as well. All these are the reasons that keep Angular among the top client-side technologies.

Basic Usage and Terms

This function is executed when a consumer calls the subscribe () method. The subscriber function determines how to obtain or generate values or messages to be released.To execute the observable, we have created and started receiving notifications, you can call it subscribe () method, passing an observer. This is a JavaScript object that specifies the handlers for the notifications you receive. The subscribe () call returns a Subscription object that has an unsubscribe () method, which is your call, to stop receiving notifications.Following is an example that describes the basic usage model by showing how an observable could be used to provide geolocation updates.

// We Create an Observable that will start listening to get updates of geolocations

// whenever the consumer subscribes.

const geolocations = new Observable((observer) => {

let watchingId: number; // This is Simple geolocation API check offers values to publish if ('geolocation' in navigator) { watchingId = navigator.geolocation.watchPosition((currentposition: Position) => { observer.next(currentposition); }, (error: PositionError) => { observer.error(error); }); } else { observer.error('Geolocation is not available'); } // Whenever the consumer unsubscribes, clean up the data ready for the next subscription. return { unsubscribe() { navigator.geolocation.clearWatch(watchingId); } };

});

// Call subscribe() method to start listening for updates.

const geolocationsSubscription = this.geolocations.subscribe({

next(currentposition) { console.log('Your Current Position: ', currentposition); }, error(msg) { console.log('Error Getting Geo Location: ', msg); }

});

// This method Stops listening for location after 10 seconds

setTimeout(function() {

this.geolocationsSubscription.unsubscribe();

}, 10000);Defining Observers

A handler for receiving notification of observable implements the interface of Observer. It is an object that specifies callback methods to handle the three types of notifications which is an observable can send:

Next: Next notification is required as a handler for every delivered value called zero or greater times after execution starts.Error: Error notification is an optional. It is a handler used for error notification called zero or greater execution of the observable instance.Complete: Complete notification is optional. It is a handler used for the execution of complete notification. Delayed values can keep being delivered to the next handler after execution is complete.

An observer object can determine any combination of these handlers. If you do not provide a handler for a notification type, the observer skips notifications of that type.

Subscribing

An Observable instance starts publishing values only when anyone subscribes to it. You subscribe by calling the method subscribe () of the instance, passing an observer to receive the notifications.

In order to show how subscribing works, we require to create a new observable. There is a constructor that we use to create new instances, but for instance, we can use some methods from the RxJS library that create simple observables of repeatedly used types:of (…items): It Returns an Observable instance that synchronously transmits the values provided as argumentsfrom(iterable): It converts its argument to an Observable instance. This method is generally used to convert an array to an observable.Following is an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console:

Subscribe using Observer

// Following will Create a simple observable that emits three values

const ourObservable = of(1, 2, 3);

// Create an observer object

const ourObserver = {

next: i => console.log('Our Observer got a next value: ' + i), error: error => console.error('Our Observer got an error: ' + error), complete: () => console.log('Our Observer got a complete notification'),

};

// Following code will Execute with the observer object

ourObservable.subscribe(ourObserver);

// observable Logs:

// Our Observer got a next value: 1

// Our Observer got a next value: 2

// Our Observer got a next value: 3

// Our Observer got a complete notification

Optionally, the subscribe () method can allow callback function definitions inline, for next, error, and complete handlers. For example, the above subscribe () call is the same as the one the determines that predefined observer:

Subscribe with locational arguments

const ourObservable = of(1, 2, 3);

// Create an observer object

const ourObserver = {

};Whether this case, a next handler is needed. The error and complete handlers are elective or optional.

Remember that a next () function could receive for instance message strings or event objects, numeric values, or structures according to context. As a general term, we refer to data published by an observable as a stream. Each and every type of value can be represented with an observable and the values are published as a stream.

Creating Observables

Use the Observable constructor to create an observable stream of each and every type. The constructor allows it as its argument the subscriber function to run when the observables subscribe () method get executed. A subscriber function receives an Observer object and can release values to the observer's next () method.

For example, create an observable similar to the of (1,2,3) above, you might do something like this:

Creating observable with constructor

// Following oursequenceSubscriber function runs when subscribe() is called

function oursequenceSubscriber(observer) {

// synchronously deliver 1, 2, and 3, then complete

observer.next(1);

observer.next(2);

observer.next(3);

observer.complete();

// unsubscribe function does not require to do anything in this

// just because of values are delivered synchronously

return {unsubscribe () {}};

}

// Following code will Create a new Observable that will deliver the above sequence

const oursequence = new Observable(oursequenceSubscriber);

// Following code will execute the Observable and print the result of each notification

oursequence.subscribe({

next(num) {console.log(num);},

complete () {console.log ('Sequence Finished');}

});

// Logs:

// 1

// 2

// 3

// Sequence FinishedTo take this example a pretty addition, we can create an observable that releases events. In this example, the subscriber function is specified inline.

Create with custom fromEvent function

function fromEvent(target, nameofEvent) {

return new Observable((observer) => {

const handler = (e) => observer.next(e); // Following code will Add the event handler to the target target.addEventListener(nameofEvent, handler); return () => { //Following code will Detach the event handler from the target target.removeEventListener(nameofEvent, handler); };

});

}

Now we can use this function to create an observable that releases key down events:

Use custom fromEvent function

const KEY_ESC = 27;

const nameOfInput = document.getElementById('input_name') as HTMLInputElement;

const subscription = fromEvent(nameOfInput, 'keydown').subscribe((e: KeyboardEvent) => {

if (e.keyCode === KEY_ESC) {

nameOfInput.value = '';

}

});

Conclusion

In this blog, we have discussed using an observable and observer with Basic usage and terms. We have also discussed subscribing, defining observers, and creating observables with an example of it.

‍

Author

Chief Technology Officer

Work with world leading tech companies from the Philippines

Submit CV

One of our recruitment officers will get in touch with you today!

Head of Marketing

Cloud Employee is building a ‘Future of Work’ AI driven talent tech platform in the remote software engineer staffing space.

In this strategic and hands-on creative role, you'll have the opportunity to shape the narrative of remote work and impact the tech industry at a global scale.

With team members across the US, LATAM, Europe and Asia - we’re on a mission to bridge the talent gap with our matching platform and employee experience programs.

We need your storytelling strategy skills to ‘share the journey’ and the human stories behind our business

POST DATE

May 1, 2024

WORK LOCATION

Remotely

JOB TYPE

Full Time

Web Programming Tip: Observable and Observer in Angular

Work with world leading tech companies from the Philippines

If you’re interested to know more about our employee benefits and perks, you can download the booklet.

Submit your CV today

Head of Marketing

Strategy & Operations Manager

Software QA Test Engineer

Senior/Team Lead Full-Stack PHP Developer

Senior/Lead Backend Developer - Brazil

Senior/Lead Backend Developer

Senior UI Developer with Umbraco

Senior Software Engineer (VB6)

Senior Python Developer

Senior /Lead Fullstack Developer - Brazil

Senior Integrations Developer

Senior Integration Backend Developer

Senior Fullstack Python Developer with React

Senior Fullstack PHP Laravel Developer

Senior Fullstack Engineer

Senior Frontend Developer (React)

Senior NET Developer

Senior DevOps Engineer

Robotics Software Engineer

Senior Python Developer

Python Developer (Senior Level)

Python Developer

Perl Developer

Mid-Senior Mechanical Engineer

Mid-Senior Industrial Design Engineer

Backend Python Developer

CNC Machinist

CRM Data Specialist (MS Dynamics 365)

Electrical Engineer

Front-End Developer

Front End React Developer

Frontend Developer (NextJS and React)

Frontend Developer (Senior)

Frontend React Developer

Full-Stack Developer

Full-Stack Laravel/Vue Developer (Jr to Mid)

Full Stack .Net Developer

Full-Stack Node/VueJS Developer (Mid - Senior)

Full-Stack PHP Developer (Mid to Senior)

Full-Stack PHP Developer Tech Lead

Full stack RoR/VueJS Developer

Fullstack Developer

Fullstack .NET Developer

Lead/Senior Frontend Developer (UI/UX) - Brazil

Marketing Specialists

Backend Developer (Python)

Senior Full-Stack PHP Developer

Web Programming Tip: Observable and Observer in Angular

Heading

Heading

We would love to help