title: MatDialog not displayed correctly
body: <p>I'm trying to use a <code>MatDialog</code> and based on <a href="https://material.angular.io/components/dialog/overview" rel="noreferrer">this example</a> I've implemented that dialog as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {Component, Inject, OnInit} from '@angular/core';
  import {Router} from '@angular/router';
  import {AuthenticationService} from '../../../service/authentication.service';
  import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent {
  
    constructor(private router: Router, public dialog: MatDialog) { }
  
    openDialog(): void {
      const dialogRef = this.dialog.open(CreateGroupDialogComponent);
    }    
  }
  
  @Component({
    selector: 'app-create-group-dialog',
    template: `
      &lt;span&gt;Hello World!&lt;/span&gt;
    `
  })
  export class CreateGroupDialogComponent {
    constructor(public dialogRef: MatDialogRef&lt;CreateGroupDialogComponent&gt;) {  }
  }
  </code></pre>
  
  <p>However, even though the dialog comes up as I press the according button, what I get it this:</p>
  
  <p><a href="https://i.stack.imgur.com/CnodP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/CnodP.png" alt="enter image description here"></a></p>
  
  <p>The HTML template gets not displayed and the dimensions of the modal is wrong. </p>
  
  <p>I don't see what the problem is. Why is the modal not correctly drawn?</p>
  
  <p>This is the generated HTML code when opening the modal. As can be seen it's empty.</p>
  
  <p><a href="https://i.stack.imgur.com/L6HoP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/L6HoP.png" alt="enter image description here"></a></p>