'Angular how to freeze mat table

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;
}
htmlcssangularangular-material


Solution 1:[1]

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;
}

Solution 2:[2]

You can add overlay div after the table and show it, when you want to block view for table

<div class="container">
    <div class="mat-elevation-z8 layout-container">
       ...//table
    </div>

    <div class="overlay" *ngIf="requestInProgress"></div>
</div>

.container {
 position: relative;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  opacity: 0.5;
  background-color: grey;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HamzaFarooq
Solution 2 Slawa Eremin

Related Questions