Datepicker in Angular 21 zone-less - calendar popup in wrong position

[vladt22]

ngx-bootstrap: 21.0.1 Angular: 21 Bootstrap: 5.3.8

Bug description: calendar popup does not appear directly under calendar input, as it normally does. Instead its pops up on the left side of the page (x=0) and below all other controls. Steps to reproduce:

Create new app (with zone but it will be disabled app.config.ts):

• ng new ng21 --zoneless=false
• cd ng21
• npm i bootstrap ngx-bootstrap

Add calendar:

• app.config.ts:

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideNoopAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [
    provideNoopAnimations(),
    provideBrowserGlobalErrorListeners(),
    // zoneless
    // provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes)
  ]
};

• app.ts:

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, BsDatepickerModule],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})
export class App {
  protected readonly title = signal('ng21');
}

• app.html:

<div class="row">
  <label class="col-1 col-form-label">Date</label>
  <div class="col-2">
    <input class="form-control" type="text" bsDatepicker />
  </div>
</div>

Expected behavior

In app.config.ts uncomment provideZoneChangeDetection and popup displays normally