Pass data to child component using Async Pipe in Angular

Atit

Oct 26, 2020·1 min read

We might fond of using Async Pipe in our applications as they do have the best benefits. Recently, I was trying to use my async data to the child component and want to use it in my child component.

Here is the approach which I found quite helpful.

Parent Component

data$ = this.dataQuery.currentData$;

Parent Component HTML

<parent-component  [data]="data$ |async"  ></parent-component>

Child Component

@Input() data!: any;//data can be ready to use without any subscribe//we can use map to create/filtersetData() {
    this.newData = this.data.map((value: any) => {
        return {
            label: value.label,
            id: value.id
        };
    });
}

References:

Looking for job change.. would like to find out the latest interview questions asked for Angular? Check out my series below.