How to pass an array to a child component in angular

Question

So I am able to pass a string to a child component but when I try to pass an array I get [object Object] as a string parameter.

Not sure why this is happening!

parent component html:

<app-channel-fields-list data="{{channelFields}}"></app-channel-fields-list>

Where channelFields is

const channelFields =[ { "name": "first_name", "description": "first name" } ]

Child component html:

{{data}}

<tr *ngFor=" hero in data">
    <td>{{hero.name}}</td>
</tr>

Child component ts:

 @Input() data;
  ngOnInit() {
      console.log('data', this.data);  // this also prints [object Object], which is weird
  }

So, not really sure what the issue is since it works perfectly for passing strings but not arrays!

Here is a youtube video with what it actually looks like: https://www.youtube.com/watch?v=1gsmnoVhEig

I found a similar question: Angular passing array from parent to child component

But I can't get the dang thing to work.

gavgrif · Accepted Answer · 2022-12-25 07:04:19Z

0

You are getting the error because its trying to interpolate the object into a string because of the curly brackets int the parent declaration. You need to pass the array as in the following.

<app-channel-fields-list [data]="channelFields"></app-channel-fields-list>

This will allow the array to be pased to the child component - then you can iterate over it as you are doing. Also - minor thing = tyou do not need quotes around the object keys.

const channelFields =[ { name: "first_name", description: "my description" } ]

also - when iterating using *ngFor - you should use

<tr *ngFor="let hero of data">
    <td>{{hero.name}}</td>
</tr>

edited Dec 25, 2022 at 7:04

answered Dec 25, 2022 at 6:59

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

How to pass an array to a child component in angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related