I've encountered a new issue that I'm hoping someone can help me with. I'm working on a simple parent-child component relationship where an Input variable is passed into a ChildComponent. The ChildComponent in question is a bootstrap modal, and there's another ChildComponent that uses an Output EventEmitter to transmit data to the ParentComponent, which is then passed to the modal as an Input.
My problem arises when the modal opens, as the Input variable is showing as undefined, even though the change is detected by OnChanges. This discrepancy persists even after the modal is closed. I suspect there's an error somewhere in my implementation. Here's some relevant code:
ChildComponent sending the initial object:
alertPopup(alert:Notification) {
this.notifyAlert.emit(alert);
}
ParentComponent function passing object to modal ChildComponent:
showPopup(alert:Notification) {
this.selectedNotification = alert;
this.$('#alert-modal').modal({backdrop: 'static'});
}
HTML snippet for modal ChildComponent, accepting selectedNotification:
<app-alert-popup [notification]="selectedNotification"></app-alert-popup>
Modal ChildComponent code:
@Input() notification:Notification;
constructor(private dateService:BusinessDateService) { }
ngOnInit(): void { }
ngOnChanges(changes:SimpleChanges) {
console.log(changes);
console.log(this.notification);
}
close() {
console.log(this.notification);
this.$('#alert-modal').modal('toggle');
}
ack() {
this.close();
}
It seems like a timing issue to me, and I've even tried adding a delay after the selectedNotification change in the ParentComponent, but to no avail. I'm open to any suggestions or additional information you might need to assist me. Thank you in advance for your help!