I am facing an issue where I am trying to emit an event from a child component and display it in the parent HTML, but it doesn't seem to be working. Below is my code:
ParentComponent.ts
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
parentMessage = "Hello from Parent";
fromChildMessage: String;
constructor() { }
ngOnInit(): void {
}
fromChild($event){
this.fromChildMessage = $event;
console.log(this.fromChildMessage);
}
}
ParentComponent HTML
<app-child [childMessage] = "parentMessage" (sendingToParent) = "fromChild($event)"></app-child>
<p>{{fromChildMessage}}</p>
ChildComponent.ts
import { EventEmitter } from '@angular/core';
import { Component, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
@Input() childMessage: String;
@Output() sendingToParent: EventEmitter<any> = new EventEmitter<any>();
text: String = "Hello from Child";
constructor() { }
ngOnInit(): void {
}
sendParent(): any {
this.sendingToParent.emit(this.text);
}
}
ChildComponent HTML
<p>child works!</p>
{{childMessage}}
<button (click)="sendParent()">SEND</button>
When viewing ParentComponent.HTML, the {{fromChildMessage}} does not get printed in the browser, and similarly, {{childMessage}} does not show up when viewing ChildComponent.HTML. Am I overlooking something here?