title: Angular 10 Angular Material Dialog doesn't work correcly
body: <p>I'm trying to use angular material dialog. So I created a button to open the dialog.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;button mat-button class=&quot;btn&quot; (click)=&quot;openModal()&quot;&gt;Rate&lt;/button&gt;
  </code></pre>
  <p><strong>TS</strong></p>
  <pre><code>import {MatDialog} from '@angular/material/dialog';
  import { DrinksModalComponent } from 'src/app/shared/components/drinks-modal/drinks-modal.component';
  
  constructor(
      private dialog: MatDialog
    ) {}
  
  openModal(){
      this.dialog.open(DrinksModalComponent);
    }
  </code></pre>
  <p><strong>HTML MODAL</strong></p>
  <pre><code>&lt;h1 mat-dialog-title&gt;Dialog with elements&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;This dialog showcases the title, close, content and actions elements.&lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-button mat-dialog-close&gt;Close&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Module</strong></p>
  <pre><code>    imports: [
          CommonModule,
          RouterModule,
          HttpClientModule,
          MatToolbarModule,
          MatTabsModule,
          MatTableModule,
          MatSnackBarModule,
          MatButtonModule,
          MatCardModule,
          MatDialogModule
        ],
   entryComponents:[DrinksModalComponent],
  </code></pre>
  <p>but when I click, it's open the dialog, but not in front of th e screen look:</p>
  <p><strong>Expectation</strong>
  <a href="https://i.stack.imgur.com/0M8Px.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0M8Px.png" alt="enter image description here" /></a></p>
  <p><strong>Result</strong>
  <a href="https://i.stack.imgur.com/7HtFl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7HtFl.png" alt="enter image description here" /></a></p>