Angular @Input of type Observable

Question

Is it bad practice to pass in a component's @Input an observable ?

For example: The template of the parent will have

<profile-edit [items$]="profileFacade.items$">

and the ProfileEditComponent will have a variable like this:

@Input items$: Observable<ProfileItem[]>

And use the | async pipe to unrwap the values of the observable in the template of the ProfileEditComponent

Answer 1

I think this is not good practice. Angular provides you an async pipe which is exactly what you want here.

When using async pipe:

• less code is generated since you do not need to subscribe to the observable first.

• The component does not need to know about Observable class and is more stupid like this

So I think this:

<profile-edit [items]="profileFacade.items$ | async">


@Input items: ProfileItem[]

Is cleaner and better than this:

<profile-edit [items]="profileFacade.items$">`


@Input items: Observable<ProfileItem[]>`

Just my guesses, I am not a specialist.

Answer 2

For async pipe this is good solution, but be aware of change detection mechanism. Because from angular point of view [items] bounded property does not change, if your change detection strategy will be set to onPush, your view might not be refreshed accordingly. Then, you will need to manually subscribe to this input observable and on each change trigger change detection by yourself.