Suggest an edit

Improve this article

Refine the answer for “How do you send an event from a child component to the parent?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

To send an event from a child component to its parent in Angular, you use a combination of `@Output()` and `EventEmitter`.

## Step by step

1. **In the child component**:
  - Create a property with `@Output()` of type `EventEmitter`.
  - Call `.emit()` on the desired event.

```typescript
@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Click me</button>`
})
export class ChildComponent {
  @Output() clicked = new EventEmitter<string>();

sendMessage() {
    this.clicked.emit('Hello from the child component!');
  }
}
```

2. **In the parent component**:
  - Subscribe to the event through `(eventName)` in the template.
  - Handle the data received from the child component.

```typescript
@Component({
  selector: 'app-parent',
  template: `<app-child (clicked)="handleClick($event)"></app-child>`
})
export class ParentComponent {
  handleClick(message: string) {
    console.log(message); // "Hello from the child component!"
  }
}
```

> Conclusion: the child component uses `EventEmitter.emit()`, the parent subscribes through `(eventName)` and receives the data.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts139 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.