Friday, January 19, 2018

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'

selector :'child-selector',
templateUrl : 'child.component.html'
export class ChildComponent

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


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


And Child.template.html is

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'
selector :'parent-selector',
templare : 'parent.component.html'
directives :[ChildComponent]})

export class ParentComponent
alert("Employe name is " + message);


No comments: