How to cover webpage with multiple Angular components with an element to disable user interactions?

user_347484 0
Viewed 94

I have out of the box asp.net core Angular SPA. It is structured in the way that an angular component for header menu / footer are always visible. And the middle is a "page" - another angular component.

What I need is to "disable" the whole page if I receive certain error code in typescript of the "middle" component.

It doesnt necessarily needs to be fool-proof but reasonably disabling user interaction with the whole web-page/web-browser tab.

If it was within one component I would just place a div with ngIf and turn it on.

But how to make the whole html document to be covered from inside one of the Angular components?

EDIT: after the page is "disabled" I am not going to need it. So if it is possible to delete the whole content from the HTML body and replace it with a div and error message - would be even neater

Illustration - how the final html looks like (red lines for the head menu and the middle component):

enter image description here

angular12 typescript asp.net-core css html
1 Answers

Apparently its very easy to replace the whole document body:


import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document)

. . .

    http.get ...,
      error => {
        console.log("User data get failed", error);
        if (error.status == 401) {
          this.document.body.innerHTML = 
            "<div>Your authentication token has expired.</div>";
user_3474840
Related