angular - 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

question from:https://stackoverflow.com/questions/65939173/mat-dialog-is-not-rendering

Answer 1

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