Angular @Output() Decorator With Examples

Angular @Output() decorator in a child component or directive allows data to flow from the child to the parent. A property decorated with @Output in child component is used to raise an event to notify the parent of the change. That property must be of type EventEmitter, which is a class in @angular/core that you use to emit custom events.

@Output, $event and EventEmitter in Angular

In order to know how to use @Output decorator in Angular you should have idea about the following entities-

@Output decorator
EventEmitter class
$event object

1. @Output decorator

A property in a Component that emits a custom event is decorated with @Output decorator. For example in the statement

 @Output() messageEvent = new EventEmitter<string>();

messageEvent property is decorated with @Output() which means this property is going to emit a custom event. That is why this property is of type EventEmitter.

2. EventEmitter class

EventEmitter class is used in components with the @Output to emit custom events synchronously or asynchronously. EventEmitter class has two methods-

emit(value?: T)- Emits an event containing a given value, T signifies the value to emit.
subscribe()- Registers handlers for events emitted by this instance.

When we assign an EventEmitter to an output, subscription of instances is automatically done by Angular so you don't need to use this method explicitly in most of the scenarios.

3. $event object

In an event binding, Angular sets up an event handler for the target event. The binding conveys information about the event. This information is encapsulated in $event and may include data values such as an event object, string, or number.

When the event is raised, the handler executes the template statement. For example in the following statement

(messageEvent)="displayMessage($event)"

(messageEvent) is the target event

displayMessage($event) is the template statement.

When the event messageEvent is raised, template statement displayMessage($event) method is executed. Argument of the displayMessage() method is $event which encapsulates the value passed as method parameter.

Angular @Output() example

Consider a child component as given below.

src\app\message-output.component.ts

import { Component, EventEmitter, Output } from "@angular/core";

@Component({
  selector: 'app-msg-output',
  templateUrl: './message-output.component.html'
})
export class MessageOutputComponent {
  @Output() messageEvent = new EventEmitter<string>();
  message: string = "Hello";
  counter: number = 1;

  onButtonClick(){
    this.messageEvent.emit(this.message + this.counter++);
  }
}

Here messageEvent property is of type EventEmitter which means it’s an event.

Property messageEvent is also decorated with @Output which means this property provides a way for data to go from the child to the parent.

In method onButtonClick(), messageEvent property raises an event with the string value.

src\app\message-output.component.html

In the template there is a button with a click event binding. The (click) event is bound to the onButtonClick() method in the child component class.

<h3>Send message to parent component</h3>
<button class='btn btn-primary' (click)="onButtonClick()">Send Message</button>

Here is the parent component.

src\app\app.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit{
  message:string = '';

  ngOnInit(): void {
  }
 
  displayMessage(msg:string){
    this.message = msg;
  }
}

In the component there is a property message and a method displayMessage() that assigns value to this message property.

src\app\app.component.html

<div class="container">
  <app-msg-output (messageEvent)="displayMessage($event)"></app-msg-output>
  <p>{{message}}</p>
</div>

In the template child selector <app-msg-output> is used establishing the parent-child component relationship.

The event binding, (messageEvent)="displayMessage($event)", connects the event in the child, messageEvent to the method in the parent, displayMessage().

The $event contains the data that is passed while emitting the event from the child component method.

this.messageEvent.emit(this.message + this.counter++);

Whenever “Send Message” button is clicked, messageEvent is raised with the “message+counter” as value which is encapsulated in $event. Because of the event binding (messageEvent)="displayMessage($event)" displayMessage() method is called whenever messageEvent event is raised where value of the passed string is assigned to the message property in the parent component that’s how data flow from child to the parent component using @Output in Angular.

Initial stage-

After clicking button few times-

That's all for this topic Angular @Output() Decorator With Examples. If you have any doubt or any suggestions to make please drop a comment. Thanks!

>>>Return to Angular Tutorial Page

Related Topics

You may also like-

Tech Tutorials

Monday, April 12, 2021