Angular 8:Child to Parent Component

Posted byanthonykuongPosted inangular, Development

Parent Component
=====================
(notify) = “handler()”

==================
Child Component
@Output
notify
===================

If you want to pass some data from child to parent component, we create an EventEmitter and decorate with @Output() decorator to be communicated to the parent.

The Parent will have an event binding with the name of the eventEmitter bound to a method to receive the event from the child.

 

child.component.html

<button click=”passDataToParent()”  >Emit Data </button>

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

child.component.ts

export class ChildComponent{
@Output

noitfyParent:EventEmitter<string> = new EventEmitter<string>();

passDataToParent(){

this.notifyParent.emit(“”);

}

 

 

parent.component.html

<app-child (noitfyParent)=”parentMethod($event)” />

parent.component.ts

export class ParentComponent{

childData:string;

parentMethod(data){

this.childData = data;

}

}

Published by anthonykuong

Anthony is a versatile Software professional with around 10 years of experience. He is a Full Stack developer experienced with clients in the Financial, Health and Supply Chain industries. He is experienced with MVC frameworks ( Spring Boot) , SPA frameworks ( Angular , VueJS), and also supports automated build deployments and packaging for development, qa, and production servers.. He has delivered rich user experience using Modern web technologies and techniques such are HTML5, CSS3, ECMAScript 6 (ES6)/ ECMAScript 2015, CSS pre-processors (SASS, Less), JavaScript build tools (Grunt, Gulp) , various UI Frameworks including AngularJS , Knockout JS , and CSS Frameworks including Bootstrap, and Foundation. He is adaptable to new technologies and frameworks. He is a rigorous, quality-conscious contributor with solid analytical skills. I can also be found on youtube - Youtube Channel: https://www.youtube.com/user/akuong/

Leave a comment