How to pass multiple data to child component using @Input

Question

I have a question that if we want to pass multiple data to child component using @Input how to achieve that.

If we have component something like this:

<ex-comp [exData1]="exampleData1" [exData2]="exampleData2"></ex-comp>

How to get the data in the child component. Using two @Inputs?

If so, how does we know which data comes into which @Input? Order matters?
If not, how to achieve that?

Sorry if I miss basic point in this.

Thanks..

I'd say you could have tried this in your code before asking? ;) — AVJT82
– AVJT82, Commented Jul 31, 2017 at 6:51
@AJT_82, I should've tried it before asking. But, I wanted to know all the theoritical things before doing it practically. — Sai
– Sai, Commented Jul 31, 2017 at 7:43

Vivek Doshi · Accepted Answer · 2017-07-31 06:08:49Z

20

You can achieve that in your child component by this

 @Input()exData1;
 @Input()exData2;

<ex-comp [exData1]="exampleData1" [exData2]="exampleData2"></ex-comp>

Here exampleData1 and exampleData2 are data from your parent component and exData1 and exData2 are the input names that you can access into your child component by above given code.

answered Jul 31, 2017 at 6:08

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

2 Comments

Sai Over a year ago

I think I missed very basic thing. Thanks for answering.

Vivek Doshi Over a year ago

@SaiUnique , I am glad that you found your solutions , :)

Vano Maisuradze · Accepted Answer · 2017-07-31 06:09:33Z

1

You just create public variables with @Input() attribute:

export class ExampleComponent{

   @Input('exData1') exData1: any;
   @Input('exData2') exData2: any;
}

answered Jul 31, 2017 at 6:09

Vano Maisuradze

5,9196 gold badges48 silver badges73 bronze badges

1 Comment

Sai Over a year ago

Thanks for answering.

Collectives™ on Stack Overflow

How to pass multiple data to child component using @Input

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related