feat(dropdown): add support for dropup

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

Closes #667

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.
  */