ng-matero/extensions

Configure z-index on loader

GianlucaLocri opened this issue · 4 comments

GianlucaLocri commented

Hi, new extension user here! First of all a big THANKS for this amazing work!

I'm using the loader component to wrap an angular material table like this

<mtx-loader loading="true" type="spinner" color="primary" hasBackdrop="true">
  <table mat-table [dataSource]="data">
    // omissis
  </table>
</mtx-loader>

however the result is somewhat broken. The table is covered by backdrop except for the header that is visible.
I digged a bit and I found that material table uses z-index = 100 for the header.

I tried to modify my component css to include this

.mtx-loader-backdrop {
    z-index: 200;
}

.mtx-loader-main {
    z-index: 300;
}

but the code is obviously not working due to view encapsulation...

Can you suggest the proper way to do this?
Thanks!

nzbin commented 
:host ::ng-deep {
  .mtx-loader-backdrop {
      z-index: 200;
  }
  
  .mtx-loader-main {
      z-index: 300;
  }
}
  • 👍1
GianlucaLocri commented

Thanks @nzbin I also thought of this solution, but as per angular documentation:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>>, and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Is there any alternative?

nzbin commented

Don't worry, it's safe to use. Alternatively you can put override styles in the global stylesheets.

https://angular.dev/guide/components/styling#ng-deep
https://www.reddit.com/r/Angular2/comments/13vns98/ngdeep_never_use_it_because_its_deprecated_or_use/

  • 👍1
nzbin commented

v17.3.6 and v18.2.1 has fixed the z-index

  • ❤️1