A signal input is an Angular component input declared with the input function, so a parent still supplies a value while the child reads that value as a signal. It avoids treating an input as a plain property that must be manually bridged into reactive state. section 7.5.2 section 10.3.4
Decorating a signal with @Input is unsafe because Angular assigns the incoming value to the property, replacing the signal rather than updating its internal value. In Angular v16, a setter can forward each incoming value to a private signal, but multiple inputs make that pattern cumbersome. Angular added input in v17.1 for this purpose. section 7.5.2
Signal inputs simplify reactive component design by:
- Replacing ngOnChanges or getter/setter reactions to ordinary input-property changes. section 10.3.4
- Providing signal values that can interact more directly with observables and other signals. section 10.3.4
- Supporting incremental adoption alongside an OnPush strategy, without disrupting existing application logic. section 10.3.4
Load project details from a required id
Declare id as a required signal input with numberAttribute, convert it to an observable, and switch to the matching project request. Convert the result back to a signal for template rendering: id = input.required({ transform: numberAttribute }); project = toSignal(toObservable(this.id).pipe(switchMap(id => this.projectService.getProject(id)))). section 10.3.4
Listing 7.15 Making signal into an input property
export class SomeComponent {
#someSignal = signal('Name');
@Input()
set someSignal(value: string) {
this.#someSignal.set(value);
}
}
For Angular v16 compatibility, a setter receives the ordinary input value and calls set on a private signal instead of exposing the signal as the decorated property. section 7.5.2
