Multiple @Input in Ionic 3 and Angular 2

Question

In my Ionic 3 project, I have created custom component my-component. Now as we know using angular @Input we can pass data to this component. I have 2 inputs as

  @Input('finder') myFinder: Finder; //Finder is an Interface
  @Input('list') myList: Array<any>; 

I am using this component as

<my-component [finder]="dataFinder" [list]="aList"></my-component>

Both dataFinder and aList has value but myFinder value is always undefined where myList is correctly populated.

This the any restriction using multiple inputs?

Answer 1

Actually, you don't need to maintain 2 data bind properties at all. You can do it more elegantly as shown below. Hope code is self-explanatory.

my-class.ts

export class MyClass{
   finder:Finder;
   myList:Array<any>;   
}

.ts

@Input('data') data: MyClass;

.html

<my-component [data]="data"></my-component>