Using Number Typed Properties on Angular Components

Image by Kalle H. from Pixabay

Scenario

We have a value input property on our component of type number and we want to set it using @Input() semantics.

Approach

Use Angular’s new numberAttribute transform.

@Input({ transform: numberAttribute }) 
value: number = 0;

Demo

    <hello value="22"></hello>
    <hello value></hello>
    <hello value="-5"></hello>
    <hello></hello>

Angular Number Input Transform Demo - StackBlitz