Angular freeze the page - no click is allowed-CodePudding

I'm doing a HTTP request to the backend and I want to freeze the page. Actually, I want to freeze the entire screen. On the page, I have a button which redirect the user to another page. The button should not work. User should not be redirected until the http request is done. Is this possible in Angular?

CodePudding user response：

Usually in addition to spinner you can create a transparent/semitransparent overlay div and show it on on top of all other elements, so it prevents all user's actions. And simply show/hide it when you perform requests. There are plenty libraries, examples on ways to accomplish that. Here is CSS snippet to give an idea how CSS can look like:

.overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0.5;
}

and in template:

<div class="overlay" *ngIf="requestInProgress">
</div>