title: How can i disable elements behind my modal
body: <p><a href="https://material.angular.io/cdk/dialog/overview" rel="nofollow noreferrer">https://material.angular.io/cdk/dialog/overview</a></p>
  <p>Created a Dialog component</p>
  <pre><code>import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
  import { Component, Inject } from '@angular/core';
  
  import { DialogData } from '../../interfaces';
  
      @Component({
        selector: 'app-dialog',
        templateUrl: './dialog.component.html',
        styleUrls: ['./dialog.component.scss'],
      })
      export class DialogComponent {
        constructor(@Inject(DIALOG_DATA) public readonly data: DialogData, public readonly dialogRef: DialogRef) {}
      }
  </code></pre>
  <p>And a html file where</p>
  <pre><code>&lt;button class=&quot;close&quot; appIconButton (click)=&quot;dialogRef.close()&quot;&gt;
    &lt;app-icon icon=&quot;close&quot;&gt;&lt;/app-icon&gt;
  &lt;/button&gt;
  &lt;ng-container *ngTemplateOutlet=&quot;data.content&quot;&gt;&lt;/ng-container&gt;
  </code></pre>
  <p>My current problem is that all the elements behind buttons links are clickable where i want my modal to be encapsulated in its on world as if something its clicked behind then modal also remains open, if anyone know a solution and used @angular/cdk/dialog please let me know</p>