Angular Observables

In Angular, an Observable is a stream of data that can emit one or more values over time. It’s a powerful way to handle asynchronous data and events, and it’s a fundamental concept in Angular’s Reactive programming paradigm.

Angular Observables is like a promise in that it represents a future value. The main difference is that an observable can emit multiple values over time, whereas a promise can only resolve to a single value.

An observable can be created using the of, from, and interval methods of the rxjs library (which is included with Angular). You can also create an observable by using the Observable constructor, which takes a single argument: an observer.

Here’s an example of how you can create an observable that emits the values 1, 2, and 3:

import { of } from 'rxjs';

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

To consume an observable, you can use the subscribe method, which takes an observer as an argument. An observer is an object that has three methods: next, error, and complete. These methods correspond to the three types of notifications that an observable can emit.

Here’s an example of how you can subscribe to an observable:

myObservable.subscribe({
  next: x => console.log(x),
  error: err => console.error(err),
  complete: () => console.log('done')
});

In this example, the observer logs each value emitted by the observable to the console, logs any errors that occur, and logs a message when the observable completes.

One of the most powerful features of observables is that they are composable. You can use a variety of operators (such as map, filter, concat, merge, etc.) to manipulate, combine, and transform observables, and you can use the pipe method to chain operators together.

Observable is a key concept when it comes to Angular, it helps developers to handle asynchronous events and data. Observables provides a lot of operators to handle async events in an elegant way.

Here’s an example of how you might use observables in an Angular application:

First, you need to import the Observable class and the of operator from the rxjs library:

import { Observable, of } from 'rxjs';

Next, you can create an observable using the of operator. This operator takes one or more values and returns an observable that emits those values:

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

You can then subscribe to the observable to start receiving values. The subscribe method takes three callbacks: one for the next value, one for errors, and one for completion:

myObservable.subscribe(
  nextValue => console.log(nextValue), 
  error => console.error(error),
  () => console.log('complete')
);

4. The nextValue callback will be called with each value that the observable emits. In this case, it will be called with the values 1, 2, and 3.
5. The error callback will be called if the observable encounters an error.
6. The complete callback will be called when the observable completes. In this case, since the of operator only emits the values it was given and then completes, the complete callback will be called immediately after the last value is emitted.

Here’s the full example: Angular Observables Angular Observables Angular Observables

import { Observable, of } from 'rxjs';

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

myObservable.subscribe(
  nextValue => console.log(nextValue), 
  error => console.error(error),
  () => console.log('complete')
);

1
2
3
complete

In real use case you would use a service to handle some async logic that returns observables, then it will be consumed by component and you can subscribe to it to handle its values.

Angular observables provide several advantages over traditional techniques for handling asynchronous data, such as callbacks and Promises. Some of the main advantages include:

1. Composability: Observables are a sequence of values, and you can use a wide range of operators (such as map, filter, and reduce) to transform, filter, and aggregate the data. This makes it easy to create complex data flows with a few lines of code.
2. Lazy evaluation: An observable does not start emitting values until something subscribes to it. This means you can create an observable and attach multiple subscribers to it, and each subscriber will receive the same values.
3. Error handling: Observables can emit errors, which you can handle with the catch operator or by providing an error callback when subscribing.
4. Cancellation: Subscriptions to observables are cancellable, meaning you can unsubscribe from them before they complete. This is especially useful in cases where a component is destroyed before an asynchronous operation completes.
5. Interoperability: observables can be combined with other libraries and frameworks as well as Promises, Iterables and callbacks. you can also convert observables to other types.
6. Better performance: Observables can handle multiple values over a period of time whereas a promise can only handle a single value in future, This is particularly useful in cases where you need to handle a large number of values or when you want to implement real-time, low-latency data streaming.
7. Asynchronous: Observables are asynchronous, which means they do not block the execution of the code, this makes them suitable for handling response from external sources like APIs calls, User Input or events.

Angular Observables Angular Observables Angular Observables Angular Observables