How to append ngbusy to body and pass value

[iammelvin]

Rather than blocking a component is it possible to block the root component or append the same to a main body ? I need to make busy all my promises and subscription it does works within components but i need to block the whole page since i have individual components for header,footer and route outlet the loader blocks only my component area.Is there a way i can block the whole page including header and footer too.

[deyvidfk]

A simple solution would be to create a css class for full screen layer;

    <style>
     .ng-busy--fullscreen .ng-busy{
         position:fixed!important;  /* !important it is necessary to replace the original value. */         
         top: 0px;
         left: 0px;
         width: 100vw;
         height: 100vh;
     }
    </style>
    <div class="ng-busy--fullscreen" [ngBusy]="busy"></div>

[mtpultz]

@deyvidfk you'd still need to have the Subscription that you bind to the ngBusy directive in the current component, but what I think @iammelvin is saying is how can you invoke ngBusy directly from a child component of any depth and have it turn on. I've been trying to figure out something similar where when I make request in a child component, andI want not only the content of the component, but also have the side navigation covered by ngBusy without having to add ngBusy bindings into every route component. Was hoping for the service to have a way to pass in the Subscription, but it only handles the config.