Angular 14 Micro-frontend project, unable to open modal window/dialog window

Question

I am working on a micro front end project. I am unable to open modal popup window. I have tried Angular material & bootstrap approach both. But the popup window comes below current window (in case I use angular material).In case of bootstrap the dialog does not open at all. the same window opens nicely as modal window in simple angular project. here is the code.

html:

  <button  class="btn-image" (click)="openDialog(element.batchId)"> 

.ts file

   constructor(private matDialog: MatDialog) { }

  openDialog(batchId:number) {
   this.batchId = batchId
   this.matDialog.open(WavedetailsComponent, {
   height: '75%',
   width: '75',
   panelClass: 'full-screen-modal',
   data: { batchId:batchId}
  })

.css

.full-screen-modal {
  max-width: 90% !important;
  z-index: 99999 !important;  
  background: #232323;
}

Answer 1

Solved this issue of Modal window not opening correctly by this approach as provided in the link. This involves creating an HTMLelement, and ViewChild.

https://medium.com/front-end-weekly/angular-dialog-box-modal-popup-without-library-components-4b28daedc9d1

Now things are working perfectly.