Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить декоратор @Output()?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

1. У дочірньому компоненті створюється властивість типу `EventEmitter` і позначається `@Output()`.
2. Коли щось відбувається всередині дочірнього компонента, викликається метод `.emit()`, щоб повідомити батьківський компонент.
3. Батьківський компонент підписується на подію через **подієвий біндинг** `[()]=` або `(eventName)=`.

Приклад:

```typescript
// Дочірній компонент
@Component({
  selector: 'app-child',
  template: `<button (click)="notifyParent()">Натисни</button>`
})
export class ChildComponent {
  @Output() clicked = new EventEmitter<string>();

notifyParent() {
    this.clicked.emit('Кнопку натиснуто');
  }
}

// Батьківський компонент
@Component({
  selector: 'app-parent',
  template: `<app-child (clicked)="handleClick($event)"></app-child>`
})
export class ParentComponent {
  handleClick(message: string) {
    console.log(message);
  }
}
```

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати118 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.