Reputation: 339
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;
}
Upvotes: 3
Views: 5781
Reputation: 3018
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
}
}
Upvotes: 1
Reputation: 78
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
Upvotes: 0
Reputation: 460
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)
}
}
Upvotes: 3