CODEWITHSUNDEEP
javascriptangular
jfmarquez
jfmarquez

Reputation: 69

Passing data from parent to specific children in Angular

I have a parent component that dynamically loads child components via *ngFor. My parent component loads data for rendering child components. There is extra data needed after on user request.

The html of parent component:

<panel *ngFor="let item of collection" (selected)="onTogglePanel($event, item)">
    <div panel-body>
        <item-detail
            *ngIf="item.detail; else templateLoading"
            [detail]="item.detail"
            (eventItemLoad)="getExtraData($event, item.detail)"
            ></item-detail>
    </div>
</panel>

Each child component, emits an event to the parent component, that will make an http request for getting the data.

The question is, how can I pass the data to the specific child component?

I have been reading about invoking child method from parent, but I don't know really how to invoke only for specified child.

NOTE: Perhaps my approach of parent getting data and passing to children is not correct and each child should get the data. Any advice for the approach is welcome. Thanks for any help.

Upvotes: 0

Views: 174

Answers (1)

Air1
Air1

Reputation: 567

The child should get the data on its own.

It looks like you just need item.detail to get the additional data. So if you don't need anything from the parent, just let the child make the http request.

This is about separation of concerns : in Angular you achieve this by creating components, each one serving its specific purpose - and not "messing" with another one if it is not needed.

Upvotes: 1

Related Questions