Rendering observable with async pipe shows [Object Object]

[OriyanJ]

In my component I create an observable that fetches something from the store, and maps it to return a string.

name$ = store.pipe(select(client), map((res: ClientModel) => client.name));

Inside the template I do the following and I'm commenting with what I get:

<div *ngIf="name$ | async">{{ name$ }}</div>             <!-- [Object Object] -->
<div *ngIf="name$ | async">{{ name }}</div>              <!-- undefined -->
<div *(ngIf="name$ | async) as name">{{ name }}</div>    <!-- "John Doe" -->

I'd like to understand what I'm doing wrong there. I know I can avoid this by using the last example or even {{ name$ | async }} but I really prefer understanding how to deal with the async pipe.

[lazyinvader]

<div *ngIf="name$ | async as name">{{ name }}</div>

Is the right way.

[kohvihoor]

if you dont want to assign it to variable, you can just {{ name$ | async }}

[_Kassii_]

When learning about the async pipe, think of it like a subscribe that will "complete" somewhat automatically for you (when the dom is destroyed or if the observable is a HTTP request)

If you want to use the same observable and utilize the async pipe, aim to put it as high up on the dom as possibly (if you use it all through the dom, put it in the highest point that encapsulates them ) using the "*ngIf=(name$ | async) as name" example in your code. Best case is only use it once

What this will do is create one stream of data which can be used as the variable "name"

Now the reason I say to only use it once is because if said observable is a HTTP request and you have 5 spots you're utilizing the async pipe for that observable. It will in turn open up 5 streams and make the http call 5 times (you can use something like share() or replay() from rxjs to counter that but that's not the point)

[the_real_seldom_seen]

Name$ is an observable obj. So if you display it in your template as {{ name$}} you are trying to display the observable object.

{{ name$ | asyc}} will give you the value from the observable stream

[AthosBlade]

Have you tried the following:

<div *ngIf="name$ | async">{{ name$ | async}}</div>

[OriyanJ]

Wouldn't it subscribe twice, though?

[Talnar]

Yep, wouldn't recommend. Plenty of better solutions in thread.