Passing data from Child to Parent

To pass data from child to parent we use @Output decorator to decorate any property of child component. The property type

must be an event.

Child Component is

import {Component } from '@angular/core'

@Component({
selector :'child-selector',
templateUrl : 'child.component.html'
})
export class ChildComponent
{

@Output() emplName : EventEmitter<string> = new EventEmitter<string>();

onClick()
{

this.emplName.emit("Employee name is Faizan");
}

}

And Child.template.html is

<h2>

I am a nested Component </h2>

<span (click)="onclick()">Click Me</span>


Parnet.component.html is



<h1>I am container</h1>

<child-selector (emplName)='ongetempname($event)'  ></child-selector>

Parent Component class is

import {Component} from '@angular/core'
@Component({
selector :'parent-selector',
templare : 'parent.component.html'
directives :[ChildComponent]})

export class ParentComponent
{
onGetEmpName(message:string):void{
alert("Employe name is " + message);
}

}