Search code examples
angularangular-services

Angular how to disable the screen when calling web service

I am new to Angular , this looks like a simple question but I couldn't find an answer when googled it.. when I call a web service that takes a few seconds I have a spinner displayed but I want that all the screen will be disabled ( like a gray screen -something like I see on popup messages ) any ideas? I want this to work also when I have more than one component

Solution

  • You can place a div on the site and apply the following CSS to it. Then you can toggle if with *ngIf (set it visible at the start of the request and hide it after it finished):

    <div class="disable-background" *ngIf="toggleLayer"></div>

.disable-background{
   position: fixed;
   top: 0;
   left: 0;
   background: #2d2d2d;
   opacity: 0.8;
   z-index: 998;
   height: 100%;
   width: 100%;
}

    What it does is that it lays a gray layer above the actual screen which is a bit transparent.