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);
  }

}

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();
  }

}

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