I implemented a global loader which will be shown every time a http request happens until I get a response.
app.component.html:
<mat-sidenav-content>
<loader></loader>
<router-outlet></router-outlet>
</mat-sidenav-content>
But if I do a http request after submitting the form, the loader appears behind the mat-dialog instead in front of it. The loader already has z-index = 9999 !important. I also tried those approaches How can i change the Z-Index of mat-dialog in Angular but sadly it didn't work. Any ideas?