Simplify Angular Templates that Use Observables with View Models

When you work with observables in Angular, your templates can get a bit messy because you find yourself passing the async pipe everywhere and then need to keep track of it.

You can see in this template that we have a lot of async pipes and we need to keep track of them.


<!-- home.page.html -->
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      {{ title$ | async }}
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <p>
    I'm {{ name$ | async }} and I'm a {{ role$ | async }}, this is a random list of Pokemon:
  </p>
  <ion-list lines="none" class="ion-no-padding ion-no-margin">

    <ion-item *ngFor="let pokemon of (pokemon# | async)">
      <ion-label>
        {{ pokemon.name }}
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

We can clean our template up a bit by using a view model in your template We'll do this by combining all the observables in your class into one single observable.


// home.page.ts
export class HomePage {
  private readonly http = inject(HttpClient);

  readonly title$ = of('Combining Observables');
  readonly name$ = of('Jorge Vergara');
  readonly role$ = of('Software Developer');

  readonly pokemon$ = this.http.get<PokeResponse>('https://pokeapi.co/api/v2/pokemon').pipe(
    map(response => response.results)
  )

  // add this observable to combine all the observables into one
  readonly vm$ = combineLatest([this.title$, this.name$, this.role$, this.pokemon$]).pipe(
    map(([title, name, role, pokemon]) => ({title, name, role, pokemon}))
  )
}

Now back in our view we can move everything into an ng container and reference the view model.


<ng-container xngIf="vm$ | async as vm">
  <ion-header [translucent]="true">
    <ion-toolbar>
      <ion-title>
        {{ vm.title }}
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="ion-padding">
    <p>
      I'm {{ vm.name }} and I'm a {{ vm.role }}, this is a random list of Pokemon:
    </p>

    <ion-list lines="none" class="ion-no-padding ion-no-margin">
      <ion-item *ngFor="1let pokemon of vm.pokemon">
        <ion-label>
          {{ pokemon.name}}
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-content>
</ng-container>

[00:00] Here we have an example of an Angular application working with observables. It has some variables that we're printing on the page, and it's making an HTTP call to get some information from a server. When you work with observables, your templates can get a bit messy because you find

[00:18] yourself passing the async pipe everywhere and then need to keep track of it. There is a pattern I learned from using NgRx component store and it's called using a view model in your template. For that, we're going to create a new class variable.

[00:36] This is going to be our view model. Here we're going to combine all of these observables. What we want to do is

[00:55] return one single object that has all of our information. Now, we can clean our template a bit by creating one single subscription to our view model. Now, we can move everything inside of an ng-container,

[01:16] and now we can start using our view model. Since we are already using the async pipe here, we are not going to need it anywhere else. Instead, I'm going to get the variables from VM dot and the variable name.

[01:34] You see, when I save, it's going to be exactly the same. I can reload the page and all of my data will still be there. With this, you only need to keep track of

[01:51] one subscription and this is the one for your view model.

Transcript