I am currently working on implementing a loader component with the ability to show or hide based on a boolean value in the component's HTML. I have successfully included a matSpinner element, but when embedded in app.component.html, the background does not appear greyed out.
Below is the code snippet from loading.component.html:
<div class="spinner_container"><mat-spinner *ngIf="show"></mat-spinner></div>
The corresponding CSS code for the spinner container is as follows:
.spinner_container {
border-radius: 10px;
height: 70px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 70px;
z-index: 3;
opacity: 0.5;
}
In my app.component.html file, I have placed the loader component alongside other components:
<app-header></app-header>
<app-loader></app-loader>
<router-outlet></router-outlet>
My challenge now is how to disable user interaction with controls behind the spinner until it resolves. Ideally, I would like the application's background to be grayed out during this time to prevent any clicks on controls.
Although the spinner itself functions properly, the issue lies with the accessibility of other controls on the page without being grayed out.