Async pipe does not fill object data into template

Question

Can anyone help me see if there is a syntax error here in my template? It does not give error, but does not fill in data into the template either:

Answer 1

Another option would be to use @Input and leverage smart/dumb component approach. In your smart component you can pass the async object to the dumb component then in the dumb component you can use it like a normal object.

The idea is that your smart component deals with logic and data and the dumb component handles presentation.

Smart component:

Dumb component class:

@Input() myHero: Hero;

Dumb component template:

{{ myHero.name }}