Serginho Serginho - 1 month ago 15
TypeScript Question

Angular 2 @Input number issue

I have the following component:

<component value="3"></component>


And the component code is:

private _value:number;

get value(): number {
return this._value;
}

@Input()
set value(value: number) {
console.log(value);
console.log(typeof value);
this._value = value;
}


The log is:

3
string


But if I bind the property like:

<component [value]="variable1"></component>


In this case I get a number if variable1 is type number.

3
number


I know there's no magic with typescript but is this the right behavior? Should Angular Input decorator do the conversion?

I'm checking types in the setters, but I get errors when typescript is compiling.

I don't want to use type any in the gettes and setter.

Any elegant solution?

Answer

When binding with brackets [], the value gets bound directly on the object.

With attribute binding, the value between the quotes gets handled as string.

Maybe have a look at the docs.


working Plunker for example usage

Comments