Angular Zoneless Change

[spdocumentad]

Modal and Popover not working with zoneless or signal

[inlooxgroup]

+1

[inlooxgroup]

Positioning on ngZone.onStable.subscribe... cannot be used anymore:

https://angular.dev/guide/experimental/zoneless#remove-ngzoneonmicrotaskempty-ngzoneonunstable-ngzoneisstable-or-ngzoneonstable

I'm referring to this line: https://github.com/valor-software/ngx-bootstrap/blob/c31c3caf63011743d4ce1adb185cf319a37fcc79/src/component-loader/component-loader.class.ts#L366

[ed4becky]

I am having similar issue with Typeahead

[nielswitte]

When using provideZonelessChangeDetection() popovers and tooltips aren't positioned correctly. Seems to be related to the code snipped ghost referenced. I am still using provideZoneChangeDetection() for now, but hope this can be resolved in the near future.

[PapaNappa]

This is still an issue and will become more and more noticeable when people switch to Angular 21, which promotes Zoneless, and uses this as the default for new projects.

The issues we are seeing:

• tooltip not positioned correctly
• dropdown not positioned correctly Both fix themselves after scrolling, as the Positioning Service will listen to scroll events.

[PapaNappa]

I could fix the tooltip issue with the following directive:

import {Directive, inject} from '@angular/core';
import {PositioningService} from 'ngx-bootstrap/positioning';
import {TooltipDirective} from 'ngx-bootstrap/tooltip';

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: '[tooltip]',
  hostDirectives: [{directive: TooltipDirective, inputs: ['tooltip', 'delay']}],
})
export class TooltipFix {
  private readonly positioningService = inject(PositioningService);
  private readonly tooltipDirective = inject(TooltipDirective);

  constructor() {
    this.tooltipDirective.onShown.subscribe(() =>
      requestAnimationFrame(() => this.positioningService.calcPosition()),
    );
  }
}

In your components using the tooltip, replace the import TooltipModule (or TooltipDirective) with TooltipFix. Add more inputs/outputs as necessary.