How to send multiple objects to nested child component in one input using Angular 6

Question

I would like to send multiple objects or parameters to child component using one input :

<child [OneInput]="{object1,object2}"></child>

Because in child component im usnig set method to get data from parent component

@Input()
set OneInput(data)
{
 console.log(data)
}

i don't want to create a separated variable kind let obj= {obj1:data1,obj2:data2}

Any help please.

Create object on the .ts let object = {object1,object2} and then used that variable on view as <child [OneInput]="object"></child> — Rohit.007
– Rohit.007, Commented Dec 6, 2018 at 9:11
is there any possibility to do it without touching ts file ? — AHmedRef
– AHmedRef, Commented Dec 6, 2018 at 9:12

KShewengger · Accepted Answer · 2018-12-06 09:22:00Z

2

If on your component, you specify 2 variables that you want to pass in your template then you can directly pass it on [OneInput]

ParentComponent

@Component({
   ...,
   template: `<child [OneInput]="{userList: users, positionList: positions}"></child>`
})
export class ParentComponent {

   users = ['user1', 'user2'];
   positions = ['position1', 'position2'];

}

ChildComponent

@Component({...})
export class ChildComponent {

   @Input()
   set OneInput({userList, positionList}) {    // You can use data or you can destructure it to directly access the objects without having to data.userList and data.positionList
      console.log(userList, positionList)
   }

}

answered Dec 6, 2018 at 9:22

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

How to send multiple objects to nested child component in one input using Angular 6

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related