Що робить декоратор @Input()?

AngularJunior~1 хв читання

Декоратор @Input() в Angular використовується для передавання даних від батьківського компонента до дочірнього.

Принцип роботи:

У дочірньому компоненті властивість позначається @Input().
Батьківський компонент може передавати значення через атрибут селектора дочірнього компонента.

Приклад:

typescript

// Дочірній компонент
@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string;
}

// Батьківський компонент
@Component({
  selector: 'app-parent',
  template: `<app-child [message]="'Привіт, світ!'"></app-child>`
})
export class ParentComponent {}

Висновок: @Input() створює зв'язок даних згори вниз, дозволяючи батьківському компоненту керувати станом дочірнього компонента.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.