Using Number Typed Properties on Angular Components

Ole Ersoy
Oct 31, 2023
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>

--

--