angular 2 component allowed input values

Question

I have one component for example

export class Foo {
@Input() myInput:string = 'a';

}

Now I want the allowed values of myInput to be any of these only: a , b, c, d

if someone tries to do

<foo myInput="x">

He should get an compilation error

I believe this is possible

Thanks

Hugo Noro · Accepted Answer · 2018-03-30 12:37:40Z

3

What you are trying to achieve can be done by

export class Foo {
@Input() myInput: ’a’ | ‘b’ | ‘c’ | ‘d’;

}

By doing this you are explicitly telling TypeScript to only allow those specific characters for the binding myInput

You can get a bit more detail on type guards and type definitions in the documentation

answered Mar 30, 2018 at 12:28

Hugo Noro

3,2732 gold badges17 silver badges19 bronze badges

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

1 Answer 1