Angular how to freeze mat table-CodePudding

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 >
       ...//table
    </div>
</div>

CSS:

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

CodePudding user response：

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

HTML

<div [ngClass]="{'overlay' : requestInProgress}">
    <div >
       ...//table
    </div>
</div>

CSS

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

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

CodePudding user response：

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

<div >
    <div >
       ...//table
    </div>

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