Angular: Binding Observable values in the template

Question

Angular 10

In my component I have a simple Observable:

me$: Observable<User> = this.store.select((s) => s.user);

I wish to show the user.firstName, but this is blank result:

<div>You are {{ me$.firstName | async }}</div>

If I use this, it works, so I know data is coming:

me$ = this.store.select((s) => s.user.firstName);

{{ (me$ | async)?.firstName }} – MikeOne Aug 17 '20 at 22:22 — MikeOne, Aug 17 '20 at 22:22
Or simple remove async and check if is better – Aug 17 '20 at 22:31 — , Aug 17 '20 at 22:31

score 1 · Answer 1 · answered Aug 17 '20 at 22:27

1

me$ observable should be resolved first before you call a property of the value.

<div>You are {{ (me$ | async)?.firstName }}</div>

answered Aug 17 '20 at 22:27

critrange

1 Answers1