Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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 = {
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'),
};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.
.png)
One of our recruitment officers will get in touch with you today!
