There are two key components: List and Modal. They do not have a direct child-parent relationship.
The issue arises when clicking on the new button triggers the openModal() method, resulting in a popup opening. I have set this.isOpenModal = true;
List Component openModal() logic snippet:
public isOpenModal: boolean = false; public openModal(id: string): void { if (!this.isOpenModal) { this.isOpenModal = true; const data = {id: id}; this.modalModel.add(AudienceModel.ENTITY_NAME, data); } }
In the Modal Component, there is a close() method:
isModalOpen: boolean;
public close(index: number): void {
this.isModalOpen = false;
this.audienceModel.isModalOpened = this.isModalOpen;
for (let i = 0; i < this.modalsArray.length; i++) {
if (this.modalsArray[index].modalStyle.zIndex <= this.modalsArray[i].modalStyle.zIndex) {
this.modalsArray[i].modalStyle.zIndex--;
}
}
this.modalsArray.splice(index, 1);
}
Upon executing the close() method, I need to ensure that isOpenModal: boolean = false; is also set to false and trigger an event in the List Component.
Any suggestions or solutions for this challenge?