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?

No there is no restrictions, please reproduce this issue in a plunker/stackblitz :) — AT82, Nov 04 '17 at 17:43
Sorry guys. It was a miskate from me. I was reading the Input params in the constructor. It should be done after ngAfterViewInit(). — Tapas Mukherjee, Nov 06 '17 at 15:54
Well, you can do it in OnInit as well, there the input is also available. — AT82, Nov 06 '17 at 16:21

score 1 · Answer 1 · answered Oct 31 '17 at 04:14

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>

Multiple @Input in Ionic 3 and Angular 2

1 Answers1