Mat Dialog is not rendering

Question

i want to show a delete modal in my expansion panel component, currently i have this:

expansion-panel.component.ts:

 import { Component, OnInit, Input } from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import { DeleteModalComponent } from '../delete-modal/delete-modal.component';

 @Component({
    selector: 'app-admin-expansion-panel',
    templateUrl: './admin-expansion-panel.component.html',
    styleUrls: ['./admin-expansion-panel.component.scss']
 })
 export class AdminExpansionPanelComponent implements OnInit {

    @Input() admin: any;
 
    constructor(private dialog: MatDialog) { }
 
    openDeleteModal() {
        this.dialog.open(DeleteModalComponent);
    }
 
    ngOnInit(): void {
    }
 
 }

and this is my delete-modal.component.ts:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-delete-modal',
  templateUrl: './delete-modal.component.html',
  styleUrls: ['./delete-modal.component.scss']
})
export class DeleteModalComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

and this is delete-modal.component.html:

<p>delete-modal works!</p>

When i execute the code, the terminal shows that everything is fine, but when i look at the browser and i click on 'Eliminar' (delete) i have this:

error on the browser console

this is the version of all i use:

Angular version and more...

Sorry for image links, i don't have reputation enough to upload images to stackoverflow

Answer 1

you need to inject MatDialogRef<DeleteModalComponent> in your dialog component constructor

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-delete-modal',
  templateUrl: './delete-modal.component.html',
  styleUrls: ['./delete-modal.component.scss']
})
export class DeleteModalComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<DeleteModalComponent >) { }

  ngOnInit(): void {
  }
  // close the dialog
  close() {
    this.dialogRef.close();
  }

}

additionally, if you want to pass data to your dialog, you have to inject @Inject(MAT_DIALOG_DATA) public data: DialogData inside your dialog component constructor. the call should be made like this in that case

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {name: "Jujutsu Kaisen"}
    });
  }

note: worth mentionning that previously, the entryComponents array in the NgModule definition was used to tell the compiler which components would be created and inserted dynamically. With Ivy, this isn't a requirement anymore and the entryComponents array can be removed from existing module declarations

Answer 2

You need to register your DeleteModalComponent an entryComponent in your app.module.ts

Example of suppose module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DeleteModalComponent] // here your component module
})

Hope useful