Output property example in Angular 6

Output properties are outbound properties which flows from a child component to its parent component. These are events which originate from the child component and get handled in the parent component.

In this example we shall see on how to declare a @Output property in a child component and how to pass an event through the @output property to the parent component and handle the event in the parent component.

Let us start with the Input component example and extent it by adding a @Output property to it.

In the child component we declare the @Output property handleClick. Also we create an event handler handleButtonClick which captures the event in the child component and emits it to the parent component.

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

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

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

  styleUrls: ['./child.component.css']

})

export class ChildComponent implements OnInit {

  @Input() parentMessage: string

  @Output() handleClick = new EventEmitter();

  childMessage: string;

  constructor() { }

  ngOnInit() {

    this.childMessage = 'Message from Child Component';

  }

  handleButtonClick() {

    this.handleClick.emit(this.childMessage);

  }

}

In the child component’s template we call the components event handler which will handle the event and emit it to the parent handler.

<p>

  Hello from child Component.<br/>

  @Input Message from Parent: <b>{{parentMessage}}</b>

  <input type="button" value="Click Me" (click)="handleButtonClick()"/>

</p>

Now we have to declare the @output parameter in the parent component, and bind it to a function displayMessage() which will handle the event raised by the child component.

<table class="layoutTable">

  <tr>

    <td class="leftMenu">

        <a routerLink="/about" routerLinkActive="active">About</a><br/>

        <a routerLink="/contact" routerLinkActive="active">Contact</a><br/>

    </td>

    <td class="content">

      This is the Home page of the Routing Component

      <app-child [parentMessage] = 'message' (handleClick)='displayMessage($event)'></app-child>

      <router-outlet></router-outlet>

    </td>

  </tr>

</table>

In the parent components class we define the event handle, in this example the handler will receive the message passed from the child component and write it to the console.

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

@Component({

  selector: 'app-route-app',

  templateUrl: './route-app.component.html',

  styleUrls: ['./route-app.component.css']

})

export class RouteAppComponent implements OnInit {

  message: string;

  constructor() { }

  ngOnInit() {

    this.message = 'Hello from Parent Component.'

  }

 

  displayMessage(strMessage) {

    console.log(strMessage);

  }

}

We have a button ClickMe in the child component, on click of the button the event is handled and emitted to the parent component, the parent component receives the event and displays the message emitted to the console as follows.