title: App not showing dialog instead, my application shows the dialog as a component on my page
body: <p>I am making a test application, were I use a dialog when I click on a button.
  I did everything suggested here (<a href="https://material.angular.io/components/dialog/overview" rel="nofollow noreferrer">https://material.angular.io/components/dialog/overview</a>), but I cannot understand why it's not working</p>
  
  <p>Instead of showing my component as a dialog, it just shows my dialog on my page (not a dialog) see my screenshot. What is in the red box should be opening as a dialog</p>
  
  <p><a href="https://i.imgur.com/jUQD8Yg.png" rel="nofollow noreferrer">https://i.imgur.com/jUQD8Yg.png</a></p>
  
  <p>I've tried some different things already, also searched some solutions on the internet, even here on StackOverflow. But nothing seems to work at this moment.</p>
  
  <p>Home component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { saveAs } from 'file-saver';
  import { ok } from 'assert';
  declare var require: any;
  import {MatDialog, MatDialogConfig} from "@angular/material";
  import { TestDialogComponent } from './test-dialog/test-dialog.component';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    constructor(private http: HttpClient, public dialog: MatDialog) {}
  
   openDialog() {
      const dialogRef = this.dialog.open(TestDialogComponent);
  
      dialogRef.afterClosed().subscribe(result =&gt; {
        console.log(`Dialog result: ${result}`);
      });
    }
  </code></pre>
  
  <p>Dialog:</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
  
  @Component({
    selector: 'app-test-dialog',
    templateUrl: './test-dialog.component.html',
  })
  export class TestDialogComponent {
  
    constructor(public dialogRef: MatDialogRef&lt;TestDialogComponent&gt;,  @Inject(MAT_DIALOG_DATA) public data: any) { }
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  }
  </code></pre>
  
  <p>app.Module</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      TestDialogComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule,
      FormsModule,
      BrowserAnimationsModule,
      MatDialogModule,
      AppRoutingModule,
      DemoMaterialModule,
    ],
    entryComponents: [TestDialogComponent],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>