Angular how to freeze mat table

Issue

I'm trying to freeze a mat table. Inside the table I have inputs, checkboxes and so on. Somehow, I'm trying to freeze it based on a variable in ts, so the user could not change the table. I tried to put an overlay div, but the table is still not freeze. If I put position:fixed the table will not be shown anymore, so this is not a solution. How can I do it? HTML:

<div [id]="requestInProgress ? 'overlay' : ''">
    <div class="mat-elevation-z8 layout-container">
       ...//table
    </div>
</div>

CSS:

#overlay {
  z-index: 10000;
  opacity: 0.5;
  background-color: grey;
}

Solution

You just need to disable the pointer-events to prevent user clicks/interaction.

HTML

<div [ngClass]="{'overlay' : requestInProgress}">
    <div class="mat-elevation-z8 layout-container">
       ...//table
    </div>
</div>

CSS

.overlay{
    pointer-events: none; // The magic line

    z-index: 10000;
    opacity: 0.5;
    background-color: grey;
}

Answered By - HamzaFarooq