0 day streak
javascript / intermediate
Snippet

Signal-based Component Inputs

Signal inputs are the modern replacement for @Input() decorators, offering better performance and built-in reactivity without manual change detection.

snippet.js
javascript
1
2
3
4
5
6
@Component({ ... })
export class UserCard {
name = input.required<string>();
age = input(0);
isAdmin = input(false, { transform: booleanAttribute });
}
angular
Breakdown
1
input.required<string>()
Defines a mandatory input that returns a reactive Signal.
2
input(0)
Defines an optional input with a default value of zero.
3
transform: booleanAttribute
A utility that converts string attributes like 'true' into actual boolean values.