title: Angular dialog not opening up as a modal window
body: <p>I am new to angular and just trying to get a an dialog window to pop up and it is showing up BUT not as a modal window.</p>
  
  <p>Here is some of my code</p>
  
  <p>Inside 'app.module.ts'</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpClientModule } from '@angular/common/http';
  import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
  import { MatDialogModule } from "@angular/material/dialog";
  import { MatCardModule } from "@angular/material";
  import { MatButtonModule } from "@angular/material";
  
  @NgModule({
    declarations: [
      QuadMergeSearchFormComponent,
      QuadMergeSearchResultsDialogComponent
    ],
    entryComponents: [
      QuadMergeSearchResultsDialogComponent
    ],
    imports: [
      BrowserModule,
      MembersideRoutingModule,
      FormsModule,
      HttpClientModule,
      MatDialogModule,
      MatCardModule,
      MatButtonModule,
      BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p>Inside 'quad-merge-search-form.component'</p>
  
  <pre><code>constructor(private dialog: MatDialog) { }
  
  onSubmit(): void {
      let dialogRef = this.dialog.open(QuadMergeSearchResultsDialogComponent, 
      {
          width: '600px',
          height: '400px'
      });
  }
  </code></pre>
  
  <p>Do I need to add anything to quad-merge-search-form.component.html?</p>
  
  <p>Inside 'quad-merge-search-results-dialog.component'</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-quad-merge-search-results-dialog',
    templateUrl: './quad-merge-search-results-dialog.component.html',
    styleUrls: ['./quad-merge-search-results-dialog.component.scss']
  })
  export class QuadMergeSearchResultsDialogComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit() {
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;p&gt;
    quad-merge-search-results-dialog works!
  &lt;/p&gt;
  </code></pre>
  
  <p>Inside 'app.component.html' (does anything need to go in here?)</p>
  
  <pre><code>&lt;site-header&gt;&lt;/site-header&gt;
  &lt;div class="site-content"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  &lt;site-footer&gt;&lt;/site-footer&gt;
  </code></pre>
  
  <p>When I run page and click on button, the dialog shows up BUT below <code>'&lt;site-footer&gt;'</code> tag.  </p>
  
  <p>Thx
  jonpfl</p>