feat(dropdown): now you can bind to dropup property

Author: valorkin

demo/src/app/components/+dropdown/demos/dropup/dropup.html

@@ -1,15 +1,20 @@
-<div class="btn-group dropup" dropdown dropup>
+<div class="btn-group" dropdown [dropup]="isDropup">
   <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Dropup <span class="caret"></span>
   </button>
-    <ul *dropdownMenu class="dropdown-menu" role="menu">
-      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
-      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
-      </li>
-      <li role="menuitem"><a class="dropdown-item" href="#">Something else
-        here</a></li>
-      <li class="divider dropdown-divider"></li>
-      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
-      </li>
-    </ul>
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
+    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
+    </li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Something else
+      here</a></li>
+    <li class="divider dropdown-divider"></li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
+  </ul>
 </div>
+<div class="checkbox"><label>
+  <input type="checkbox" value="true" [(ngModel)]="isDropup"
+         style="display: inline-block;"
+  >{{ isDropup ? 'Is dropup' : 'Is dropdown' }}
+</label></div>

demo/src/app/components/+dropdown/demos/dropup/dropup.ts

@@ -5,4 +5,5 @@ import { Component } from '@angular/core';
   templateUrl: './dropup.html'
 })
 export class DemoDropupComponent {
+  isDropup = true;
 }

src/dropdown/bs-dropdown.directive.ts

@@ -12,7 +12,8 @@ import { BsDropdownState } from './bs-dropdown.state';
 @Directive({
   selector: '[bsDropdown],[dropdown]',
   exportAs: 'bs-dropdown',
-  providers: [BsDropdownState]
+  providers: [BsDropdownState],
+  host: {'[class.dropup]': 'dropup'}
 })
 export class BsDropdownDirective implements OnInit, OnDestroy {
   /**
@@ -138,20 +139,20 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     this._state.dropdownMenu
       .then((dropdownMenu) => {
         // check direction in which dropdown should be opened
-        this.dropup = typeof this.dropup !== 'undefined' || this.dropup;
-        this._state.direction = this.dropup ? 'up' : 'down';
-        if (!this.placement) {
-          this.placement = this.dropup ? 'top left' : 'bottom left';
-        }
+        const _dropup = this.dropup === true ||
+          (typeof this.dropup !== 'undefined' && this.dropup !== false);
+        this._state.direction = _dropup ? 'up' : 'down';
+        const _placement = this.placement ||
+          (_dropup ? 'top left' : 'bottom left');
 
         // show dropdown
         this._dropdown
           .attach(BsDropdownContainerComponent)
           .to(this.container)
-          .position({attachment: this.placement})
+          .position({attachment: _placement})
           .show({
             content: dropdownMenu,
-            placement: this.placement
+            placement: _placement
           });
 
         this._state.isOpenChange.emit(true);