Angular Material Components without zone.js

Question

because of performance issues in one of my angular11-apps I decided to opt out of zone.js with {ngZone: noop}. I'm still using angulars material components but without zone.js some of them won't work correctly. For example the MatTooltip won't be rendered and even if I manually trigger ChangeDetection on mouseenter, the tooltip is floating on the top of the page.

Is there a workaround to use material components without zone.js? I've prepared a Stackblitz to show my problem. Hover the button and you will see the weired behaviour.

Think the problem is related to the overlayRef it creates and therefore the PositionStrategy is uses.

Thanks for any help.

Fastigiate

github.com/angular/components/issues/9169 – Anthozoan

I ran into the same issue. Any workaround for this issue?? If nothing works i will take a look into DOM Mutation Observer. – Cauline

Answer 1

I'm the author of this library

You can install the library and add the module of the library to the imports array of the AppModule.
After that material should be working:

import { ZonelessModule } from 'az-zoneless'

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    ZonelessModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

After the library is installed you can use azClick events for better performance and remove the need to call ChangeDetectorRef.detectChanges on events.

Peach