What does the @Output() decorator do?

AngularJunior~1 min read

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

How it works

In the child component, a property of type EventEmitter is created and marked with @Output().
When something happens inside the child component, the .emit() method is called to notify the parent.
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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What does the @Output() decorator do?

#How it works

Short Answer

How it works