high z-index put element in front of others, but let click on them

Question

In my angular project I added ngx-loading-bar from aitboudad/ngx-loading-bar, (I installed the http-client package), this is my app.component.html:

<div class="main-comp">
    <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>

    <header>
       ...header content...
    </header>
    <main id="main-content">
        <router-outlet></router-outlet>
    </main>
    <footer id="footer-content">
      ...footer content...
    </footer>
</div>

Now I need to add a black full screen element to block the user to press any buttons while the loader appears. I used the following scss code:

::ng-deep{
    .ngx-bar{
        z-index: 100;
        &::after{
            content: "";
            display: block;
            width: 100vw;
            height: 100vh;
            background-color: #00000066;
            position: fixed;
            top: 0;
            left: 0;
        }
    }
}

this indeed shows half opacity black div in front of all elements in the screen, but unfortunately - this doesn't prevent the click on elements! Even when I changed the color to totaly black or any non-transparent color - I still see the cursor changing to pointer and clicking when it's so - cause actions and http requests.

what is the problem? I tried to give high z-index, and change the positions fron fixed to absolute - didn't help. I also suspected that it might be pseudo element issue, so I deleted the ::after and tried to give full size to the loader div itself - same result!

I will be greatfull for any advice!

Answer 1

Making my comment into an answer, I think the problem was the :after selector is not working as you intended. You can learn more about the after selector here

Basically, to achieve your desired result, you can wrap the ngx-loading-bar component on a div and set the styling with a class. (You can use the has() function for a pure CSS solution. It will style the div only when the loader line appears inside of it)

CSS

.loadbar-bg:has(div) {
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: #00000066;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
}

HTML

<div class="main-comp">
    <div class="loadbar-bg" >
        <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar>
    </div>

    <header>
       ...header content...
    </header>
    <main id="main-content">
        <router-outlet></router-outlet>
    </main>
    <footer id="footer-content">
      ...footer content...
    </footer>
</div>