Angular 2 @Input number issue

Question

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 1

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