title: Mat Dialog is not rendering
body: <p>i want to show a delete modal in my expansion panel component, currently i have this:</p>
  <p>expansion-panel.component.ts:</p>
  <pre><code> 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 {
      }
   
   }
  </code></pre>
  <p>and this is my delete-modal.component.ts:</p>
  <pre><code>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 {
    }
  
  }
  </code></pre>
  <p>and this is delete-modal.component.html:</p>
  <pre><code>&lt;p&gt;delete-modal works!&lt;/p&gt;
  </code></pre>
  <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:</p>
  <p><a href="https://i.ibb.co/kKPBkBp/img1.jpg" rel="nofollow noreferrer">error on the browser console</a></p>
  <p>this is the version of all i use:</p>
  <p><a href="https://i.ibb.co/7JQ0xYc/img2.jpg" rel="nofollow noreferrer">Angular version and more...</a></p>
  <p>Sorry for image links, i don't have reputation enough to upload images to stackoverflow</p>