fix(dropdown): correct dropup position with Bootstrap 4.1

Fixes #2297 Closes #2313
ng-bootstrap · Apr 13, 2018 · 91c166d · 91c166d
1 parent 4ef7e20
commit 91c166d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/dropdown/dropdown.spec.ts b/src/dropdown/dropdown.spec.ts
@@ -101,6 +101,22 @@ describe('ngb-dropdown', () => {
     expect(getDropdownEl(compiled)).toHaveCssClass('dropdown');
   });
 
+  it('should have x-placement attribute reflecting placement', () => {
+    const html = `
+      <div ngbDropdown placement="bottom-right">
+          <button ngbDropdownAnchor></button>
+          <div ngbDropdownMenu>
+            <a class="dropdown-item">dropDown item</a>
+            <a class="dropdown-item">dropDown item</a>
+          </div>
+      </div>`;
+
+    const fixture = createTestComponent(html);
+    const compiled = fixture.nativeElement;
+
+    expect(getMenuEl(compiled).getAttribute('x-placement')).toBe('bottom-right');
+  });
+
   it('should be open initially if open expression is true', () => {
     const html = `
       <div ngbDropdown [open]="true">

diff --git a/src/dropdown/dropdown.ts b/src/dropdown/dropdown.ts
@@ -16,8 +16,10 @@ import {positionElements, PlacementArray, Placement} from '../util/positioning';
 
 /**
  */
-@Directive(
-    {selector: '[ngbDropdownMenu]', host: {'[class.dropdown-menu]': 'true', '[class.show]': 'dropdown.isOpen()'}})
+@Directive({
+  selector: '[ngbDropdownMenu]',
+  host: {'[class.dropdown-menu]': 'true', '[class.show]': 'dropdown.isOpen()', '[attr.x-placement]': 'placement'}
+})
 export class NgbDropdownMenu {
   placement: Placement = 'bottom';
   isOpen = false;