title: Angular material dialog component hides all my website components
body: <p>I'm using angular 5 and angular material (latest version) and I'm trying to open a dialog from a page. When I click the button that triggers the opening, the entire website is put in blank background like if the dialog were overlaping it contents and hiding it all.</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  
  @Component({
      moduleId: module.id,
      selector: 'app-dialog',
      templateUrl: 'dialog.component.html',
      styleUrls: ['dialog.component.scss']
  })
  export class DialogComponent implements OnInit {
  
      constructor(public dialogRef: MatDialogRef&lt;DialogComponent&gt;,
          @Inject(MAT_DIALOG_DATA) public data: any) { }
  
      onNoClick(): void {
          this.dialogRef.close();
      }
  
      ngOnInit() {
      }
  
  }
  </code></pre>
  
  <p>And this is the method that opens the Dialog.</p>
  
  <pre><code>onSubmit() {
  
          const dialogRef = this.dialog.open(DialogComponent, {
              width: '250px',
              data: { name: 'Juan Manuel', animal: 'Perro' }
          });
  
          dialogRef.afterClosed().subscribe(result =&gt; {
              console.log('The dialog was closed');
              console.log(result);
          });
      }
  </code></pre>
  
  <p>UPDATE:
  I've seen that after the dialog is rendered a class is added to my html tag. <strong>.cdk-global-scrollblock</strong> I don't know why is that class added to my html tag.</p>
  
  <pre><code>.cdk-global-scrollblock {
      position: fixed;
      width: 100%;
      overflow-y: scroll;
  }
  </code></pre>
  
  <p>That what's causing my error. Does someone knows why is that class on my html tag?</p>