How can i disable elements behind my modal

https://material.angular.io/cdk/dialog/overview

Created a Dialog component

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) {}
    }

And a html file where

<button class="close" appIconButton (click)="dialogRef.close()">
  <app-icon icon="close"></app-icon>
</button>
<ng-container *ngTemplateOutlet="data.content"></ng-container>

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