A Beginner's Guide to Understanding Angular RxJS Observables
Published: 2023-05-25 11:00:01

## A Beginner's Guide to Understanding Angular RxJS Observables



Angular is a popular JavaScript framework that is used to develop scalable, dynamic web applications for both desktop and mobile platforms. One of the most powerful features of Angular is its implementation of reactive programming with RxJS observables. In this article, we will explore Angular RxJS observables and how they can be used to manage reactive data streams in your application.

### What are Angular RxJS Observables?



In Angular, RxJS observables are used to manage and coordinate reactive data streams. At a high level, an RxJS observable can be thought of as a source of asynchronous data that can emit values over time. Observables can be used to represent a variety of data sources, such as user input, data from an API, or any other type of event or data stream within your application.

### Creating an Observable



To create an observable in Angular, we can use the `Observable.create()` method provided by the RxJS library. This method takes a single argument, which is a function that defines the observable's behavior. Here is an example of how we can create a simple observable that emits the numbers 1 through 5 over a period of time:

<pre><code>import { Observable } from 'rxjs';

const observable = Observable.create(observer => {
  let i = 1;
  const interval = setInterval(() => {
    observer.next(i);
    i++;
    if (i > 5) {
      clearInterval(interval);
      observer.complete();
    }
  }, 1000);
});
</code></pre>

In this example, we create an observable that emits the values 1 through 5 over a one-second interval. We use the `Observable.create()` method to define the observable's behavior, and we pass in a function that takes an `observer` parameter. Within the function, we define the logic for emitting values over time using the `observer.next()` method. We also check when to complete the observable using the `observer.complete()` method.

### Subscribing to an Observable



Once we have created an observable, we can subscribe to it to receive its emitted values. In Angular, we typically subscribe to observables from within our component classes. Here is an example of how we can subscribe to the observable we created earlier:

<pre><code>observable.subscribe(value => console.log(value));
</code></pre>

In this example, we use the `subscribe()` method provided by the RxJS library to listen for emitted values from our observable. Whenever a new value is emitted, the function we passed to `subscribe()` is called, and the emitted value is passed as an argument.

### Operators



One of the most powerful features of RxJS observables is their ability to be transformed and combined using a wide range of operators. Operators are functions that take an observable as input and return a new observable with modified behavior.

Here are some examples of commonly used RxJS operators:

<b>map()</b> - Transforms emitted values by applying a function to each value.

<b>filter()</b> - Filters emitted values based on a boolean condition.

<b>merge()</b> - Combines two observables into one by emitting values from each observable in the order they are received.

<b>combineLatest()</b> - Combines the latest emitted values of two or more observables into a new observable.

<b>concat()</b> - Concatenates two or more observables into a new observable, emitting values from the first observable until it completes, then emitting values from the second observable, and so on.

Here is an example of how we can use the `map()` operator to transform the values emitted by our observable:

<pre><code>observable.pipe(
  map(value => value * 2)
).subscribe(value => console.log(value));
</code></pre>

In this example, we use the `pipe()` method provided by the RxJS library to apply the `map()` operator to our observable. The `map()` operator takes a function that multiplies each emitted value by 2, and returns a new transformed observable. We then subscribe to the transformed observable to receive the multiplied values.

### Subject



In addition to observables, RxJS also provides a `Subject` class that can be used to emit values and act as an observer. A `Subject` is similar to an observable, but it also has the ability to manually emit new values using its `next()` method.

Here is an example of how we can use a `Subject` to manually emit new values:

<pre><code>import { Subject } from 'rxjs';

const subject = new Subject<number>();

subject.subscribe(value => console.log(value));

subject.next(1);
subject.next(2);
subject.next(3);
</code></pre>

In this example, we create a `Subject` that emits numeric values. We subscribe to the `Subject` using the `subscribe()` method, and then manually emit three new values using the `next()` method.

### Conclusion



In this article, we have explored the basics of Angular RxJS observables and how they can be used to manage reactive data streams in your application. We have seen how to create an observable, subscribe to it, and transform it using operators. We have also covered the `Subject` class and its ability to manually emit new values.

Angular RxJS observables are a powerful feature of the Angular framework, and understanding how to use them effectively can greatly enhance the functionality and scalability of your application.