Dropdown alignement problem using [ngClass] binding properety

[zannkukai]

Bug description: When I try try to align the menu to right using the [ngClass] property binding the first display of the dropdown is not well align. The second and next displays are correctly aligned. When the alignement dropdown-menu-right class is used with the class attribute, the dropdown has always a good align.

I search about the problem on source code and it seems that the element.classList returned by nativeElement.querySelector doesn't like the [ngClass] binding https://github.com/valor-software/ngx-bootstrap/blob/4a6225e859a3a950d2c75ce824c7980aa2e8bbc9/src/dropdown/bs-dropdown-container.component.ts#L60

I also tried with [class.dropdown-menu-right] property but result is the same.

to reproduce StackBlitz: https://stackblitz.com/edit/angular-jw8cpr?file=app/menu-alignment.html

versions ngx-bootstrap: 6.2.0 Angular: v11 Bootstrap: 4.0

Expected behavior [ngClass] could be used to align the dropdown menu at first call.

[pgeyman]

I have encountered this issue too with the latest ngx-bootstrap. This really needs to be resolved. I found a temporary solution here: https://stackoverflow.com/a/57377690/2199475

  <ng-template *ngIf="popupRight" dropdownMenu>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
      <ng-container *ngTemplateOutlet="dropdownMenuContents"></ng-container>
    </ul>
  </ng-template>
  <ng-template *ngIf="!popupRight" dropdownMenu>
    <ul class="dropdown-menu" role="menu">
      <ng-container *ngTemplateOutlet="dropdownMenuContents"></ng-container>
    </ul>
  </ng-template>
  <ng-template #dropdownMenuContents>
    <li class="dropdown-item">
      <!-- ... -->
    </li>
  </ng-template>