Ag-Grid с всплывающим окном не открывается как всплывающее окно

Question

Я пытаюсь открыть всплывающее окно от щелчка по ячейке в agGrid. Всплывающее окно отображается, но не как всплывающее окно, оно отображается под сеткой. Я приложил соответствующие классы ниже, я просмотрел различные примеры и уверен, что все правильно, он просто не будет отображаться как всплывающее окно. Любая помощь будет принята с благодарностью. Спасибо

app.module

    import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule} from '@angular/common/http';
import { AppComponent } from './app.component';

import { AppRoutingModule } from './app.routing';
import { ProcessModule } from './admin/process/process.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DialogComponent } from './components/dialog/dialog.component';
import { ModalDialogService } from './services/modal-dialog.service';

@NgModule({
  declarations: [
      AppComponent,
      DialogComponent

  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    ProcessModule,
    AppRoutingModule

  ],
  providers: [ModalDialogService],
  bootstrap: [AppComponent],
  entryComponents:  [DialogComponent]
})
export class AppModule {
}

Модуль процесса

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProcessComponent } from './process.component';
import { ProcessRoutingModule } from './process-routing.module';
import { GridComponent } from './grid/grid.component';
import { VisitService } from '../../services/visit.service';
import { HttpClientModule } from '@angular/common/http';

import { AgGridModule } from '@ag-grid-community/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


import { MatDialogModule } from '@angular/material/dialog';
import { StatusModalComponent } from '../../popups/status-modal/status-modal.component';
@NgModule({
    declarations: [
        ProcessComponent,
        GridComponent,
        StatusModalComponent
    ],
    providers: [VisitService],
    imports: [
      CommonModule,
      ProcessRoutingModule,
      HttpClientModule,
      FormsModule,
      ReactiveFormsModule,
      MatDialogModule, 
      AgGridModule.withComponents([

      ])
    ],
    entryComponents: [StatusModalComponent, GridComponent
      ]
})
export class ProcessModule { }

GridComponent

import { Component, OnInit } from '@angular/core';
import { Module, GridApi, ColumnApi } from '@ag-grid-community/core';
import { AllCommunityModules } from '@ag-grid-community/all-modules';
import { AdminVisit} from '../../../models/adminVisit'
import { VisitService } from '../../../services/visit.service'
import { AgGridColumnDefinition} from './agGridColumnDefinition';

import { ModalDialogService } from '../../../services/modal-dialog.service';
import { ModalConfig } from '../../../popups/modal.config';
import { eStatusModalComponent } from '../../../popups/status-modal/status-modal.component';


@Component({
    selector: 'grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.scss']
})
export class GridComponent  implements OnInit   {

    public rowData: any[];
    public columnDefs: any[];
    public rowCount: string;
    public frameworkComponents: any;

    public modules: Module[] = AllCommunityModules;

    public api: GridApi;
    public columnApi: ColumnApi;

    public adminVisitsGridColumns: AgGridColumnDefinition[];
    public adminVisits: AdminVisit[];

    constructor(private visitService: VisitService, private modalDialogService: ModalDialogService,) {
        this.createRowData();
        this.createColumnDefs();

        this.frameworkComponents = {

        };
    }

    public createRowData() {
                this.visitService.getAdminVisitSearchResults()
                    .subscribe((result: AdminVisit[]) => {
                        if (result) {
                            this.rowData = result;
                        }
                });
    }

    private createColumnDefs() {
        this.columnDefs = [
            { headerName: '#',
                checkboxSelection: true,
             },
            {
                headerName: 'Address',
                field: 'address',
                sortable: 'true',
                filter: 'true'
            }
        ];
    }

    public onModelUpdated() {
        this.calculateRowCount();
    }

    public onGridReady(params) {
        this.api = params.api;
        this.columnApi = params.columnApi;

       this.calculateRowCount();
    }

    private calculateRowCount() {
        if (this.api && this.rowData) {
            const model = this.api.getModel();
            const totalRows = this.rowData.length;
            const processedRows = model.getRowCount();
            this.rowCount = processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString();
        }
    }

    getSelectedRows() {

    }

    public ngOnInit() {
        this.adminVisitsGridColumns = this.columnDefs;
        const addressColumnDef = this.adminVisitsGridColumns.find((column: AgGridColumnDefinition) => {
              return column.field === 'address';
          });

        addressColumnDef.onCellClicked = (params) => {
            this.openStatusDialog(this, params);
    }
    }

    public openStatusDialog(self: GridComponent, params: { api: GridApi, data: AdminVisit }): void {
        self.modalDialogService
        .openDialog<StatusModalComponent, AdminVisit>(
            ChangeStatusModalComponent,
            ModalConfig.statusModal.matDialogConfig,
            (bindObject: StatusModalComponent) => {
                bindObject.statusAdminVisit = params.data;
            },
            statusAdminVisit => {
                if (statusAdminVisit) {
                    this.updateAdminVisit();
                }
            });
    }

    private updateAdminVisit() {
    }
}

Статус Модальный

import {  Component,Input,  OnChanges,OnInit,OnDestroy} from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

import { Subject } from 'rxjs';
import { MatDialogRef } from '@angular/material/dialog';

import { AdminVisit } from '../../models/adminVisit';

@Component({
  selector: 'status-modal',
  templateUrl: './-status-modal.component.html',
  styleUrls: ['./status-modal.component.scss']
})

export class StatusModalComponent
  implements OnChanges, OnInit, OnDestroy {

  @Input()

  constructor(
    private fb: FormBuilder,
    private readonly dialogRef: MatDialogRef<StatusModalComponent>,

  ) {  }
  public statusForm: FormGroup;

  public ngOnInit(): void 
  }

  public onCloseModal() {
    this.dialogRef.close();
  }

}