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

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

Допрацюйте відповідь до «Як надіслати подію з дочірнього компонента батьківському?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

Щоб надіслати подію з дочірнього компонента батьківському в Angular, використовується комбінація `@Output()` і `EventEmitter`.

## Покроково

1. **У дочірньому компоненті**:
  - Створюєте властивість з `@Output()` типу `EventEmitter`.
  - Викликаєте `.emit()` за потрібної події.

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

sendMessage() {
    this.clicked.emit('Привіт від дочірнього компонента!');
  }
}
```

2. **У батьківському компоненті**:
  - Підписуєтеся на подію через `(eventName)` у шаблоні.
  - Обробляєте дані, отримані від дочірнього компонента.

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

> Висновок: дочірній компонент використовує `EventEmitter.emit()`, батьківський підписується через `(eventName)` і отримує дані.

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

Для рев’юера

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

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