Angular Signal Input

Signal inputs let you get values from parent components. These values are shown using a Signal

Optional inputs: Inputs are optional by default unless you use input.required. You can provide an initial value, or Angular will use undefined by default.
Required inputs: Required inputs must always have a value of the specified input type. They are defined using the input.required function.

1
import { Component, InputSignal, input } from '@angular/core';
2

3
@Component({
4
  selector: 'app-root',
5
  standalone: true,
6
  template: `<div>
7
    <p>Counter Value: {{ counter }}</p>
8
    <p>Counter Value: {{ counter() }}</p>
9
    <p>UserName Value: {{ userName }}</p>
10
    <p>UserName Value: {{ userName() }}</p>
11
    <p>LastName Value: {{ lastName }}</p>
12
    <p>LastName Value: {{ lastName() }}</p>
13
  </div>`,
14
})
15
export class AppComponent {
7 collapsed lines
16
  @Input() counter: number | undefined;
17
  counter: InputSignal<number | undefined> = input<number>();
18
  @Input({ required: true }) userName!: string;
19
  userName: InputSignal<string> = input.required<string>();
20
  @Input() lastName: string = 'arias';
21
  lastName: InputSignal<string> = input<string>('arias');
22
}

Input Alias

Angular uses the class member name as the input name by default. However, you can alias inputs to give them a different public name.

1
import { Component, InputSignal, input } from '@angular/core';
2

3
@Component(/** ... */)
4
export class AppComponent {
5
  name: InputSignal<string> = input<string>('andres', { alias: 'userName' });
6
}

1
<app-component [userName]="value" />