Consuming multiple properties via @Input() decorator in Angular 2

Question

I have this component that receives two inputs via its selector, but this can be extended to any number of inputs and any component. So, in quest of consuming multiple properties in the component itself a single @Input() decorator did not allow me to consume multiple properties, so as a workaround I used two decorators for two input properties, but I don't think this would be the only way to tackle such a scenario.

export class AsyncComponent {
     @Input() waitFor: boolean;
     @Input() message: string; // TODO: Verify if multiple inputs are needed for multiple props
 }

Update:

<app-async [waitFor]="true" message="foo"><app-async>

So, is it possible, with any other way, to just use a single decorator for any number of input props? If there are more props that I am passing other than waitFor and message, would I have to do the following for each prop.

 @Input() waitFor: boolean;
 @Input() message: string;
 @Input() someOtherProp: string;
 ....

Or is there any other way to just have one Input decorator and consume any number of properties?

Why do you want a single input, single input is for single value. — Roman C
– Roman C, Commented Feb 25, 2017 at 10:23
@RomanC, So lets say I am passing 10 props to the component, does this mean I would have to wrap the decorator 10 times in the component itself? — Umair
– Umair, Commented Feb 25, 2017 at 10:28

AngularChef · Accepted Answer · 2017-02-25 11:38:04Z

26

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...).

answered Feb 25, 2017 at 11:38

AngularChef

14.1k9 gold badges55 silver badges69 bronze badges

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

4 Comments

Umair Over a year ago

Thanks. I was kind of confused with array with the other answer.

Umair Over a year ago

Btw I just saw your interface usage description and its not fully understandable to me. Could you please maybe explain that a bit more?

AngularChef Over a year ago

As you probably know your TypeScript code needs to be transpiled into JavaScript so it can be executed in the browser. TypeScript interfaces are DROPPED during transpilation, they disappear from the final JavaScript code. In other words, TypeScript interfaces are useful for compile-time type-checking but not for run-time type-checking. In your example, the value of the input property is not yet known at compile-time, only at run-time, which means the interface doesn't really help. It's still good practice to keep it (for code documentation, code completion in your IDE...).

Umair Over a year ago

This is very useful information, really. I really appreciate it mate. Thanks a million.

Roman C · Accepted Answer · 2017-02-25 10:27:20Z

2

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

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

answered Feb 25, 2017 at 10:27

Roman C

1

2 Comments

Umair Over a year ago

I think there was a slight confusion regarding my question. I really appreciate your answer but I have made some updates to the question to make it clearer.

Roman C Over a year ago

@UmairSarfraz This answer exactly answers your question.

Collectives™ on Stack Overflow

Consuming multiple properties via @Input() decorator in Angular 2

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related