Skip to main content

Output with EventEmitter in Angular

Output and EventEmitter used together to pass data from Child component to Parent component. EventEmitter emits the data that can be received by parent component. In the below example We have two components appComponent(parent component) and childComponent(child components) child component contains textbox and parent component shows the data when user enters in the child component. Here we have used Two-way binding, we can also use ngModelChange event.



<div style="border:1px solid chocolate; width:300px; height: 120px; padding: 10px 10px">

   <b> Child component</b><br><br>
   Type here : <input type="text" [(ngModel)]='inputValue'  />


import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  selector: 'child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css']
export class ChildComponentComponent{

private _inputValue:string;
get inputValue(){
  return this._inputValue;
set inputValue(value:string){

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



<div style="border: 1px solid chocolate; height: 250px; width: 350px; padding: 10px 10px" >
 <span> <b>Parent component</b></span>
 you entered {{messageFromChild}}
  <child-component (userName)='OnDataChange($event)'></child-component>


import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {

  public messageFromChild:string;
    OnDataChange(childData: string){

Add FormsModule in the app.module.ts

That's It !!


  1. I really appreciate for this great information . I want to read your articles.Please update more posts. I usually read them. Thank you very much.
    free game Toon Cup 2017 Break The Cup For Free free game Battle for the Galaxy

  2. So here's an invitation ... if you have something to say, write it up and send it to me ( It can be an essay, a poem, a homily, or something else. We do not, at present, have established guidelines and standards governing this blog, but they're coming. Until then -- and probably after then, too -- I reserve the right to make editorial suggestions for space, style, and -- in the rarest of occasions -- content.
    kizi jogos
    io jogo online
    Games friv online


Post a Comment