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?

1. If so, how does we know which data comes into which @Input? Order matters?

2. If not, how to achieve that?

Sorry if I miss basic point in this.

Thanks..

Answer 1

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.

Answer 2

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

export class ExampleComponent{

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