Angular freeze the page – no click is allowed

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?

>Solution :

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>