title: How to set the other element clickable, when a angular material dialog is open
body: <p>I have a question, How can I set the other element in a web application to be clickable, when a material Diaolog is open. </p>
  
  <p>online I have found a example, but It was used with MdDialog, and I have tied to change MdDialog to MatDialog, but it was not working,</p>
  
  <p>the codes are as follows: </p>
  
  <pre><code>
  &lt;a href="#open1" data-open-modal="open1"&gt;&lt;button md-raised-button data-open-modal="open1" color="primary" (click)="open($event)"&gt;Open first dialog&lt;/button&gt;&lt;/a&gt;
  &lt;a href="#open2" data-open-modal="open2"&gt;&lt;button md-raised-button data-open-modal="open2" color="primary" (click)="open($event)"&gt;Open second dialog&lt;/button&gt;&lt;/a&gt;
  </code></pre>
  
  <pre><code>@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    name = 'Angular 4';
  
     constructor( public dialog: MdDialog) { }
  
    open(e){
      //debugger;
      if(window.location.href.split('#')[1] == e.target.parentElement.dataset.openModal){
         return false;
      }
      let dialogRef: MdDialogRef&lt;CommentDialogComponent&gt; = this.dialog.open(CommentDialogComponent);
          dialogRef.componentInstance.invoiceItemComments = [
          {comments: 23, createdBy: "NO2", createdDate: 1.4},{comments: 23, createdBy: "NO2", cvreatedDate: 1.4},{comments: 23, createdBy: "NO2", createdDate: 1.4}
        ];
          dialogRef.afterClosed().subscribe(result =&gt; {
          dialogRef = null;
          });
    }
  
  }
  
  @Component({
      selector: 'comment-dialog',
      templateUrl: './comment-dialog.html'
  })
  export class CommentDialogComponent {
    invoiceItemComments:any;
      constructor(public dialogRef: MdDialogRef&lt;CommentDialogComponent&gt;) {
  
      }
  }
  
  </code></pre>
  
  <pre><code>&lt;h2 md-dialog-title&gt;InvoiceItem Comments&lt;/h2&gt;
  &lt;md-dialog-content&gt;
      &lt;table class="table"&gt;
          &lt;thead class="thead-inverse"&gt;
              &lt;tr&gt;
                  &lt;th&gt;No&lt;/th&gt;
                  &lt;th&gt;Comments&lt;/th&gt;
                  &lt;th&gt;Created By&lt;/th&gt;
                  &lt;th&gt;Created Date&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr *ngFor="let item of invoiceItemComments; let i = index"&gt;
                  &lt;th scope="row"&gt;{{i}}&lt;/th&gt;
                  &lt;td&gt;{{item.comments}}&lt;/td&gt;
                  &lt;td&gt;{{item.createdBy}}&lt;/td&gt;
                  &lt;td&gt;{{item.createdDate}}&lt;/td&gt;
              &lt;/tr&gt;   
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/md-dialog-content&gt;
  &lt;md-dialog-actions&gt;
     &lt;a href="#closed"&gt; &lt;button type="button" md-raised-button (click)="dialogRef.close(true)"&gt;OK&lt;/button&gt;&lt;/a&gt;
  &lt;/md-dialog-actions&gt;
  </code></pre>
  
  <p>In this example, I can always click button, when a dialog window is open.
  but I can not understand, how it works, How can I change mdDilaog to matDialog? </p>
  
  <p>any solutions?</p>