Passing array of objects from angular template to another component using @input

Question

I am trying to pass an array of objects through angular template from one component to another one.

 <div *ngFor="let item of data">
    <div class="col-xl-3">
      <top-users  usersData ={{[item]}}> </top-users>
    </div>
  </div>

item here supposed to be

[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]

and the data is array of array of objects

[    
 [{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}],
 [{id:3, name: 'Ahmed'}, {id:4, name:'Mohammed'}],
 [{id:5, name: 'Ahmed'}, {id:6, name:'Mohammed'}]
]

When I receive the variable through @input parameter, I get the result typeof string and looks like this

[object Object],[object Object]

I tried to parseJson and gives me this error

ERROR SyntaxError: Unexpected token o in JSON at position 1

What should I do to get the right array of object?

I dont think [item] is a right way. it should be item. tried to keep it simple this will reduce bugs. — Hoang Subin
– Hoang Subin, Commented Apr 11, 2019 at 8:03

Naranz · Accepted Answer · 2019-04-11 08:05:22Z

7

You need to pass the data as below :

<div *ngFor="let item of data">
    <div class="col-xl-3">
      <top-users  [usersData]="item"> </top-users>
    </div>
  </div>

You will receive in child component as:

@Input() usersData;

usersData will look like:

[{id:1, name: 'Ahmed'}, {id:2, name:'Mohammed'}]

answered Apr 11, 2019 at 8:05

Naranz

2321 silver badge4 bronze badges

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

2 Comments

noppa Over a year ago

For completeness, the different flavors of Angular's template syntax are listed here.

Christian Vincenzo Traina Over a year ago

I'd also add that when you use an attribute without square brackets, you are passing a literal string and that's fine. The problem is that he was interpolating an object

bguiz · Accepted Answer · 2022-03-15 02:12:07Z

0

I had the same problem. I created the file with strict on, so I modified the strict to false in tsconfig.json file.

"compilerOptions": {
  "strict": false,

And also tried:

 "compilerOptions": {
   "noImplicitUseStrict": true,

If you don't find strict just add it, don't forget to add comma(,) after "strict": false,. Next time create the file with -no--strict. ex. ng new fileName -no--strict

edited Mar 15, 2022 at 2:12

bguiz

28.5k49 gold badges165 silver badges256 bronze badges

answered Mar 14, 2022 at 22:09

fuadhood

1

Collectives™ on Stack Overflow

Passing array of objects from angular template to another component using @input

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related