Suggest an edit

Improve this article

Refine the answer for “What does the @Output() decorator do?”. 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)

The `@Output()` decorator in Angular is used to **send events from a child component to its parent**.

## How it works

1. In the child component, a property of type `EventEmitter` is created and marked with `@Output()`.
2. When something happens inside the child component, the `.emit()` method is called to notify the parent.
3. The parent component subscribes to the event through **event binding** `[()]=` or `(eventName)=`.

Example:

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

notifyParent() {
    this.clicked.emit('Button clicked');
  }
}

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

> Conclusion: `@Output()` lets a child component **notify the parent about events and changes**, providing a bottom-up connection.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.