How to Attach eventListener to a modal closing?

[cevhyruz]

I implemented a globally shared Modal wrapper component, that accepts injecting a child component inside the modal body, My problem now is I want to cleanup the child component when modal is destroyed. how can I do this?

I can do this through a close button, but how to do it when the user pressed Esc or when user clicks outside of modal?

[xidedix]

@cevhyruz
You haven’t provided any details about your implementation of shared Modal. Perhaps you could begin with (visibleChange) event, or subscribing to the ModalService.modalState$ observable.

[cevhyruz]

I actually don't know if what I'm doing is correct but this is what I have done so far.

modal.service.ts

import { Injectable, Type } from '@angular/core';

import { AppModalComponent } from './modal.component';

@Injectable({
  providedIn: 'root',
})
export class ModalService {
  private modalComponent!: AppModalComponent;

  register(modal: AppModalComponent) {
    this.modalComponent = modal;
  }

  open() { this.modalComponent?.open(); }

  close() { this.modalComponent?.close(); }

  dynamicOpen<T>(component: Type<T>, data?: any) {
    console.log(data)
    this.modalComponent?.dynamicOpen(component, data);
  }

}

modal.component.ts

import {
  Component, Input, ViewChild, inject, AfterViewInit, OnDestroy,
  ComponentRef, Type, ViewContainerRef,
} from '@angular/core';
import {
  ModalModule, ModalHeaderComponent, ModalBodyComponent, ModalFooterComponent,
  ModalComponent, ModalTitleDirective,
} from '@coreui/angular';

import { ModalService } from './modal.service';

@Component({
  selector: 'quems-modal',
  imports: [
    ModalModule, ModalHeaderComponent, ModalBodyComponent, ModalFooterComponent,
    ModalComponent, ModalTitleDirective,
  ],
  templateUrl: './modal.component.html',
  styleUrl: './modal.component.scss'
})
export class AppModalComponent implements AfterViewInit, OnDestroy {
  @ViewChild('Modal') modal!: any;
  @ViewChild(
    'ModalContent',
    { read: ViewContainerRef }
  ) modalContentRef!: ViewContainerRef;

  private readonly modalService = inject(ModalService);

  private componentRef!: ComponentRef<any>;


  ngAfterViewInit() {
    this.modalService.register(this)
  }

  ngOnDestroy() {
    console.log('Modal destroyed')
  }

  open()  {
    this.modal.visible = true;
  }

  exit() {
    if (this.componentRef) {
      this.componentRef.instance.ngOnDestroy();
    }
    this.modalContentRef.clear();
  }

  close() {
    this.modal.visible = false;
    this.exit();
  }

  dynamicOpen<T>( component: Type<T>, data?: any ) {
    this.exit();
    this.componentRef = this.modalContentRef.createComponent(component);
    console.log('data:  ', data)
    if (data) {
      Object.assign(this.componentRef.instance, data);
    }
    this.componentRef.changeDetectorRef.detectChanges();
    this.open();
  }

}

I put the AppModal Selector into the default-layout template. so what I'm really doin'g is just toggling it's visibility on any component on demand. is this even the right way to use Modals?

[xidedix]

Could you try to listen to the visibleChange output of your dynamic modal?
Sth like (not tested):

dynamicOpen<T>( component: Type<T>, data?: any ) {
  ...
  this.componentRef.instance['visibleChange'].subscribe((visible: boolean) => {
    console.log('visibleChange', visible);
  });
  ...
}

[cevhyruz]

@xidedix Thanks I finally got it working