Consuming multiple properties via Input decorator in angular 2 Consuming multiple properties via Input decorator in angular 2 typescript typescript

Consuming multiple properties via Input decorator in angular 2


I agree with Roman C.

I would just pass a single object (not array) containing all props:

@Component({  selector: 'app-async'})export class AsyncComponent {  // Single object with all props.  @Input() props: { waitFor: boolean; message: string; };}

And then the parent component:

@Component({  template: '<app-async [props]="myProps"><app-async>'})export class ParentComponent {  myProps = { waitFor: true, message: 'foo' };}

NB. Be aware that interfaces declared on input properties are NOT ENFORCED. It is best practice to still declare them, but JavaScript can't runtime-check a TypeScript interface. This remark applies to all code samples in this thread (single input, multiple inputs...).


It's not possible if you need multiple values use an array or something

export class AsyncComponent {     @Input() props: any[];