I have a ts file app.component.ts which has a boolean variable "flag" , I created a component named dialog , my need is to set the variable from app.component.ts from dialog.ts.
I have seen this is possible by EventEmmitter but somehow that is not working for me.
@Output() selectionDialogEvent=new EventEmitter<boolean>(); this.selectionDialogEvent.emit("true"); In the parent I am trying
getSelectionDialogEvents($event){ console.log("Event received"+$event); this.chat=flag; } There are a lot of ways of doing this, one is using providers to share data, see here, but in this particular case I guess this code can help you:
app-parent.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-parent', template: ` Message: {{message}} <app-child (messageEvent)="receiveMessage($event)"></app-child> `, styleUrls: ['./parent.component.css'] }) export class ParentComponent { constructor() { } message:string; receiveMessage($event) { this.message = $event } } app-child.component.ts
import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: ` <button (click)="sendMessage()">Send Message</button> `, styleUrls: ['./child.component.css'] }) export class ChildComponent { message: string = "Hello World!" @Output() messageEvent = new EventEmitter<string>(); constructor() { } sendMessage() { this.messageEvent.emit(this.message) } } Parent Component Html
<hello (ParentComponet)="ParentComponent($event)"></hello> Parent Component ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // First Make function ParentComponent(data) { console.console(data); // this data of child will show in parent console window } } Child Component Html
<button type="button" (click)="sendData()">Send Data P to Child</button> Child Component ts
import { Component , OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'hello', templateUrl:'hello-component.html' }) export class HelloComponent implements OnInit { // Pass OutPut and EventEmitter @Output() ParentComponet:EventEmitter<any> = new EventEmitter() ngOnInit():void{ } // Make A function sendData(){ this.ParentComponet.emit('Send Data Child to Parent') //emit is a function and you can pass the value } } 
You have to listen to the event where you're calling the child component. And when the event gets triggered then call your function in your parent component.
<app-child (selectionDialogEvent)=getSelectionDialogEvents($event)></app-child> where $events will hold the data passed by your emitter selectionDialogEvent