RxJS Declarative Pattern in Angular
Tags: rxjs, angular, webdev, javascript
Published: 2022-04-04 09:52:48

This is a short summary on how to use a declarative pattern in Angular with RxJS.

If you are interested in the whole post, read [RxJS Declarative Pattern in Angular](https://betterprogramming.pub/rxjs-declarative-pattern-in-angular-cafba3983d21) on Medium.

To get the best out of this post, you should be familiar with [Angular](https://www.vitainbeta.org/2022/02/06/angular-tutorial-and-posts/), [RxJS](https://rxjs.dev/), and [observables](https://javascript.plainenglish.io/what-are-rxjs-observables-5707e0c4c7ba). 

## RxJS doesn’t make your code declarative

Using RxJS doesn’t make your code declarative. Actually, as soon as you use the `subscribe()` method, you are going imperative!

For this reason, we need to be declarative on purpose.

### Step 1: Create the service


Let's start by creating a service where we declare a variable `todo$`.

The dollar sign is a convention that indicates that the variable is an Observable and not the actual data.

{% embed https://gist.github.com/lorenzojkrl/dcb4af33e86b1b48e344afdb2bc9fb13 %}


The data coming from the url will be
- passed through a pipe
- passed through the [RxJS tap operator](https://www.vitainbeta.org/2022/04/04/hands-on-rxjs-operators-tap-operator/)
- saved in `todo$` 

However, if you just try this, nothing will happen!
You won't see anything in the console.

### Step 2: Assign the observable to a local variable


Let’s move to the component.

{% embed https://gist.github.com/lorenzojkrl/1db084e45f4b098a91e6eccb9f6b560d %}

The key line here is line 10, which is:
```
data$ = this.todoService.todo$;
```

We defined a local variable called `data$`. We assign the observable from the service to the variable to make it available in the component.

Note that we are not telling Angular to subscribe or unsubscribe! We are not even seeing an observer! This is where the real declarative style shines.

In the end, we just want to display some data in the template. That is our goal. How Angular achieves it is not our business.

Once again, if you just try this, nothing will happen!
You won't see anything in the console on in the template.

This makes sense because we didn't tell Angular what our goal is!

### Step 3: Use the local variable with async pipe


Let’s move to the template.
Here we tell Angular what needs to be done: Show the title of the object in the template when data is available.

To do that, we use the async pipe. 
The async pipe automatically subscribes and unsubscribes, which is shown below:

```
// app.component.html
<div *ngIf="data$ | async as data">
  {{ data.title }}
</div>
```

1. First, we bind to `data$` from the component.
2. Second, we use the async pipe to automatically subscribe and unsubscribe to `data$`
3. Third, we use `as data` to define the variable that will host the value from the observable. 
4. Finally, we can use data across the template as we did before.

A more comprehensive example and a comparison between this approach and the classic imperative approache is available on [RxJS Declarative Pattern in Angular](https://betterprogramming.pub/rxjs-declarative-pattern-in-angular-cafba3983d21) on Medium.

Let me hear your opinion!