feat(dropdown): add support for dropup

also improves the demo to show how to align the dropdown menu to the right

Closes #667

Author: jnizet

demo/src/app/components/dropdown/demos/basic/dropdown-basic.html

@@ -1,8 +1,23 @@
-<div ngbDropdown>
-  <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
-  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
-   	<button class="dropdown-item">Action - 1</button>
-    <button class="dropdown-item">Another Action</button>
-    <button class="dropdown-item">Something else is here</button>
+<div class="row">
+  <div class="col-xs-6">
+    <div ngbDropdown class="d-inline-block">
+      <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
+      <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+        <button class="dropdown-item">Action - 1</button>
+        <button class="dropdown-item">Another Action</button>
+        <button class="dropdown-item">Something else is here</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xs-6 text-xs-right">
+    <div ngbDropdown [up]="true" class="d-inline-block">
+      <button class="btn btn-outline-primary" id="dropdownMenu2" ngbDropdownToggle>Toggle dropup</button>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu2">
+        <button class="dropdown-item">Action - 1</button>
+        <button class="dropdown-item">Another Action</button>
+        <button class="dropdown-item">Something else is here</button>
+      </div>
+    </div>
   </div>
 </div>

src/dropdown/dropdown.spec.ts

@@ -17,7 +17,7 @@ function getDropdownEl(tc) {
 describe('ngb-dropdown', () => {
   beforeEach(() => { TestBed.configureTestingModule({declarations: [TestComponent], imports: [NgbDropdownModule]}); });
 
-  it('should be closed by default', () => {
+  it('should be closed and down by default', () => {
     const html = `<div ngbDropdown></div>`;
 
     const fixture = createTestComponent(html);
@@ -27,6 +27,15 @@ describe('ngb-dropdown', () => {
     expect(getDropdownEl(compiled)).not.toHaveCssClass('open');
   });
 
+  it('should be up if up input is true', () => {
+    const html = `<div ngbDropdown [up]="true"></div>`;
+
+    const fixture = createTestComponent(html);
+    const compiled = fixture.nativeElement;
+
+    expect(getDropdownEl(compiled)).toHaveCssClass('dropup');
+  });
+
   it('should be open initially if open expression is true', () => {
     const html = `<div ngbDropdown [open]="true"></div>`;
 

src/dropdown/dropdown.ts

@@ -7,13 +7,19 @@ import {Directive, Input, Output, HostListener, EventEmitter} from '@angular/cor
   selector: '[ngbDropdown]',
   exportAs: 'ngbDropdown',
   host: {
-    'class': 'dropdown',
+    '[class.dropdown]': '!up',
+    '[class.dropup]': 'up',
     '[class.open]': 'isOpen()',
     '(keyup.esc)': 'closeFromOutside()',
     '(document:click)': 'closeFromOutside()'
   }
 })
 export class NgbDropdown {
+  /**
+   * Indicates that the dropdown should open upwards
+   */
+  @Input() up = false;
+
   /**
    * Indicates that dropdown should be closed when selecting one of dropdown items (click) or pressing ESC.
    */