Inputs

Each component can forward data to its children through inputs.

How to define component inputs?

Since Angular 17.1, components can define their input using the input() function.

import { input } from '@angular/core';

@Component({...})
class Rating {
  readonly rating = input<number>();
}

input() returns a readonly signal that can only be set from the parent component.

These inputs are optional, and their default value is undefined except if provided like this:

@Component({...})
class Rating {
  readonly rating = input(5);
}

Sometimes, you want to make an input required. For example, you want the parent component to necessarily provide a rating.

In that case, you have to use input.required():

@Component({...})
class Rating {
  readonly rating = input.required<number>();
}

Parent components forward data to children using property binding:

@Component({
  template: `<mc-rating [rating]="rating()" />`,
})
class CookbookPreview {
  readonly rating = signal(3);
}

Before input(), components defined their inputs using the @Input() decorator.

@Component({...})
class Rating {
  @Input() rating: number;
}

tip

You can automatically migrate your legacy @Input() to input() using the Angular CLI signal-input-migration generator:

nx g @angular/core:signal-input-migration

# or if you are using the Angular CLI
ng g @angular/core:signal-input-migration