Angular passing object to child component

Question

I have an ngFor directive like this:

<div *ngFor="let data of datas|slice:0:2"><app-data [data]="data"></app-data></div>

But the data object is not getting passed into the app-data component from the enclosing div.

How do I pass data from the div to app-data?

This should work, have you tried to console log the data object? — Owen Kelvin
– Owen Kelvin, Commented Nov 2, 2020 at 5:55
@Latcie please check my below answer and if u clear with my answer that vote up and mark as good answers it will help to other. — Kiran Mistry
– Kiran Mistry, Commented Nov 2, 2020 at 6:10

Kiran Mistry · Accepted Answer · 2020-11-02 06:11:54Z

2

Parent Component

You can use Simply

For Example I have parent Component like this

<div *ngFor="let data of datas|slice:0:2">
    <app-child [data]="data"></app-child>
</div>

TS

I have Dummy array

 datas = [
    {id: 1, name: 'ABC'},
    {id: 2, name: 'EFG'}
  ];

Child Component

now you can use this array to child component like this

HTML

<ul>
    <li>{{data.id}}</li>
    <li>{{data.name}}</li>     
</ul>

TS

// This will bring data from parent component and this is used for sharing data between parent context and child directives or components
@Input() data;

ngOnInit() {
  console.log('data => ', this.data);
}

My Example you can check it Here

edited Nov 2, 2020 at 6:11

answered Nov 2, 2020 at 6:05

Kiran Mistry

2,7253 gold badges14 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular passing object to child component

1 Answer 1

Parent Component

Child Component

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Parent Component

Child Component

Comments

Your Answer

Sign up or log in

Post as a guest

Related