I have a specific goal that I am trying to achieve:
- When the user clicks on a Button on the Parent page, a Child Component in the form of a popup should open.
- Upon saving data on the child popup component, I need to pass this data from the Child component to the Parent.
- I have implemented Emit() to pass the data, and it is working when triggered by ngOnInit(), but not when the save button is clicked on the Child component.
Parent Component HTML-
<parentComponent>
<app-upsert-service-pop-up *ngIf="this.AddService [childProperty]="this.parentProperty"
(onInitEvent)="receiveAutoMsgHandler($event)"
(savedService)="serviceChangedHandler($event)">
</app-upsert-service-pop-up>
</parentComponent>
TS-
serviceChangedHandler(data: any) {
console.log("Data from CHild component--");
this.childServiceDataChange = data;
console.log("Data from CHild component--",data);
}
receiveAutoMsgHandler(p) {
this.msgOnChildCompInit = p;
console.log(p);
}
CHILD-
@Output() savedService =new EventEmitter();
@Output() onInitEvent = new EventEmitter();
ngOnInit() {
this.onInitEvent.emit('This message automatically appears as the child component initializes. It is defined in the child component's ngOnInit method.');}
onSaveServerDetails() {
this.savedService.emit('After saving data');}
The onInitEvent is functioning correctly, but the similar code for savedServices is not working as expected.
I'm unsure why this is happening - could it be due to the child component being a popup or am I missing something?