Currently, I am working on a parent component called List which has a property addModal: boolean;. Within the template of this List component, there is a button that shows a modal component when clicked. Here is the code snippet:
<button
(click)="addModal = true">
Show Modal
</button>
The modal component (app-modal) is a separate entity from the parent component. My goal is to be able to close the modal from within the app-modal component using an EventEmitter. However, I am facing some challenges with implementing this functionality. This is what I have so far in the Modal component:
@Output() addModal = new EventEmitter();
decline() {
this.addModal.emit(true); //? console logs the EventEmitter object
}
In the Modal template:
<button (click)="decline()"></button>
I understand that I should be listening for this event in the parent component but I am struggling with the implementation. Any assistance would be greatly appreciated.