Async pipe does not work in a very simple Angular app [duplicate]

Question

First of all I have an example on Stackblitz https://stackblitz.com/edit/angular-th31vj where you can check my app.

It is a really simple app, where I have a service (StoreService) to manage data in RxJS way and 2 components: AppComponent and Catalog Component. AppComponent contains a list of categories and router-outlet. I also want to display current category under the list of categories.

Thats how my AppComponent looks like

<h3>Categories</h3>
<ul>
  <li *ngFor="let category of store.categories$ | async">
    <a [routerLink]="['/catalog', category.id]">{{ category.name }}</a>
  </li>
</ul>
<p> Selected category: {{ store.selectedCategory$.name | async }} </p>
<router-outlet></router-outlet>

import { Component, OnInit } from '@angular/core';

import { StoreService } from './store.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  name = 'Angular';

  constructor(public store: StoreService) {}

  ngOnInit() {
    this.store.selectedCategory$.subscribe(category => console.log('App component received new category', category));
  }
}

For some reason selectedCategory$ is not displayed on the page, however I can see it in the console. I'll be glad for any help with it. Thanks.

Answer 1

You need to apply the async pipe to the observable and then get the name from it:

{{ (store.selectedCategory$ | async).name }}

Updated StackBlitz: https://stackblitz.com/edit/angular-av1pbn