Posted in Javascript

Angular2 Component Interactions with @Input() @Output() and events

Components are the core of Angular2. It is important and interesting to understand how components interact. I will try to explain the components’ interaction here.

We have 2 components here.

  1. Parent component, let’s call it Mom
  2. Child component, name it Daughter

The child component is contained inside the parent component. It looks like the one below

Let’s consider the cases:
Case 1: The child to parent communication. On click on button “Send message to Mom” button, the message “Hi Mom! Greetings from daughter” is passed from the child to the parent component. It looks like

To achieve this, we do the following at the child component

  1. Create an EventEmitter object inside the child component with  @Output() decorator
        @Output() callMomEvent = new EventEmitter();
  2. Fire the event. It is done inside the callMom() function in the child component.

So, putting it together, the child component looks like as follows


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

@Component({
    selector: "daughter-component",
    template:
            `<div style="border:blue 2px solid; width:300px;margin-left: 51px;margin-bottom: 24px;">
               <h3> I am Child comoponent, the Daughter</h3>
               <div *ngIf="messageFromMom">Message from Mom: {{messageFromMom}}</div>
                <div><button (click)="callMom()">Send message to Mom</button></div>
             </div>`
     })
export class ChildComponent {
    // Create EventEmitter object
    @Output() callMomEvent = new EventEmitter();
    // emit the event 
    callMom() {
        this.callMomEvent.emit("Hi Mom! Greetings from daughter");
    }
}

And at the parent component, we do the following

  1. Listen the custom event callMomEvent .
     <daughter-component (callMomEvent)="handleCallMom($event)"></daughter-component>

    The callMomEvent is the event fired by the child component and handleCallMom is the function that handles the event. It is defined in the parent component

  2. Receive the data emitted and display it

Putting it together, the parent component looks like as follows

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

@Component({
  selector: 'parent-component',
  template: 
           `<div style="border:red 2px solid; width:800px;">
             <h3>I am parent component, the Mom</h3>
             <daughter-component (callMomEvent)="handleCallMom($event)"></daughter-component>
             <div *ngIf="messageFromChild">
                <h3>Message from Child: </h3>
                {{messageFromChild}}
             </div>
          </div>`,
  styleUrls: ['./app.component.css']
})

export class ParentComponent {
  private messageFromChild;
  handleCallMom(message) {
    this.messageFromChild = message;
  }
}

That’s it

Case 2: Passing data from the parent component to child component

That’s simple. It’s done with input binding. Steps are as follows

  1. At the child component, declare variable messageFromMom using the @Input() decorator
    @Input() messageFromMom : string;
  2. At the parent component, bind messageFromMom as
    <daughter-component [messageFromMom]="greetings"  (callMomEvent)="handleCallMom($event)"></daughter-component></div>
    

That’s it