From 31cba418a13674917e0fcfba2419c7f27c660ba1 Mon Sep 17 00:00:00 2001
From: Dmitriy Shekhovtsov <valorkin@gmail.com>
Date: Fri, 24 Mar 2017 18:59:16 +0200
Subject: [PATCH] feat(dropdown): rollout completely rewritten bs-dropdown
 version (#1771)

fixes #1674, fixes #1749, fixes #1623, fixes #1415, fixes #802, fixes #569, fixes #530, fixes #6,
fixes #1540, fixes #1217, fixes #591, fixes #478

feat: you can pass dropdown configuration in `forRoot()` method
feat: now you can add dropdown to body by using `container="body"`

BREAKING CHANGES:
- `DropdownModule` renamed to `BsDropdownModule`, same to all dropdown components added `bs` prefix
- `addToggleClass` option is deprecated, now you need to add `dropdown-toggle` class manually if needed
- `dropdownMenu` menu become a template selector, so `*` should be added
sample:  `<ul dropdownMenu>` should become `<ul *dropdownMenu>`
- `onToggle` event deprecated use `isOpenChange` instead
- `appendToBody` deprecated, use `container="body"` instead, now dropdown behaviour and attachment params alligned with tooltips and popovers
- `keyboardNav` deprecated
- `disabled` renamed to `isDisabled`
- `dropdownToggle` doesn't prevent default behaviour anymore
---
 .../+dropdown/demo-dropdown.module.ts         |   4 +-
 .../demos/alignment/menu-alignment.html       |   6 +-
 .../+dropdown/demos/basic/basic-link.html     |  16 +-
 .../+dropdown/demos/basic/basic.html          |   7 +-
 .../+dropdown/demos/config/config.html        |  10 +-
 .../+dropdown/demos/config/config.ts          |  10 +-
 .../+dropdown/demos/container/container.html  |   9 +-
 .../demos/disabled-menu/disabled-menu.html    |  19 +-
 .../demos/dropdown-demo.component.html        |  80 ----
 .../demos/dropdown-demo.component.ts          |  22 -
 .../+dropdown/demos/dropup/dropup.html        |  21 +-
 .../app/components/+dropdown/demos/index.ts   |  11 +-
 .../+dropdown/demos/keyboard/keyboard.html    |  15 +-
 .../nested-dropdowns/nested-dropdowns.html    |  32 ++
 .../nested-dropdowns/nested-dropdowns.ts      |   8 +
 .../+dropdown/demos/not-yet-supported.html    |  18 -
 .../+dropdown/demos/split/split.html          |  15 +-
 .../triggers-manual/triggers-manual.html      |  31 +-
 .../app/components/+dropdown/docs/title.md    |   6 +-
 .../+dropdown/dropdown-section.component.ts   |  25 +-
 demo/src/ng-api-doc.ts                        | 191 +++++----
 package.json                                  |   4 +-
 .../bs-dropdown-container.component.ts        |  35 ++
 src/dropdown/bs-dropdown-menu.directive.ts    |  13 +
 src/dropdown/bs-dropdown-toggle.directive.ts  |  63 +++
 src/dropdown/bs-dropdown.config.ts            |   8 +
 .../bs-dropdown.directive.spec.ts}            |  54 +--
 src/dropdown/bs-dropdown.directive.ts         | 193 +++++++++
 src/dropdown/bs-dropdown.module.ts            |  39 ++
 src/dropdown/bs-dropdown.state.ts             |  22 +
 src/dropdown/dropdown-menu.directive.ts       |  26 --
 src/dropdown/dropdown-toggle.directive.ts     |  50 ---
 src/dropdown/dropdown.config.ts               |  11 -
 src/dropdown/dropdown.directive.ts            | 204 ----------
 src/dropdown/dropdown.interfaces.ts           |  10 -
 src/dropdown/dropdown.module.ts               |  17 -
 src/dropdown/dropdown.service.ts              |  96 -----
 src/dropdown/index.ts                         |  14 +-
 src/index.ts                                  |  12 +-
 src/spec/ng-bootstrap/dropdown.spec.ts        | 384 ------------------
 tslint.json                                   |   5 +
 41 files changed, 687 insertions(+), 1129 deletions(-)
 delete mode 100644 demo/src/app/components/+dropdown/demos/dropdown-demo.component.html
 delete mode 100644 demo/src/app/components/+dropdown/demos/dropdown-demo.component.ts
 create mode 100644 demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.html
 create mode 100644 demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.ts
 delete mode 100644 demo/src/app/components/+dropdown/demos/not-yet-supported.html
 create mode 100644 src/dropdown/bs-dropdown-container.component.ts
 create mode 100644 src/dropdown/bs-dropdown-menu.directive.ts
 create mode 100644 src/dropdown/bs-dropdown-toggle.directive.ts
 create mode 100644 src/dropdown/bs-dropdown.config.ts
 rename src/{spec/dropdown.directive.spec.ts => dropdown/bs-dropdown.directive.spec.ts} (91%)
 create mode 100644 src/dropdown/bs-dropdown.directive.ts
 create mode 100644 src/dropdown/bs-dropdown.module.ts
 create mode 100644 src/dropdown/bs-dropdown.state.ts
 delete mode 100644 src/dropdown/dropdown-menu.directive.ts
 delete mode 100644 src/dropdown/dropdown-toggle.directive.ts
 delete mode 100644 src/dropdown/dropdown.config.ts
 delete mode 100644 src/dropdown/dropdown.directive.ts
 delete mode 100644 src/dropdown/dropdown.interfaces.ts
 delete mode 100644 src/dropdown/dropdown.module.ts
 delete mode 100644 src/dropdown/dropdown.service.ts
 delete mode 100644 src/spec/ng-bootstrap/dropdown.spec.ts

diff --git a/demo/src/app/components/+dropdown/demo-dropdown.module.ts b/demo/src/app/components/+dropdown/demo-dropdown.module.ts
index 10211b9b2b..e4d9d59487 100644
--- a/demo/src/app/components/+dropdown/demo-dropdown.module.ts
+++ b/demo/src/app/components/+dropdown/demo-dropdown.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { DropdownModule } from 'ng2-bootstrap/dropdown';
+import { BsDropdownModule } from 'ng2-bootstrap/dropdown';
 
 import { SharedModule } from '../../shared';
 import { DropdownSectionComponent } from './dropdown-section.component';
@@ -15,7 +15,7 @@ import { routes } from './demo-dropdown.routes';
     ...DEMO_COMPONENTS
   ],
   imports: [
-    DropdownModule.forRoot(),
+    BsDropdownModule.forRoot(),
     CommonModule,
     FormsModule,
     SharedModule,
diff --git a/demo/src/app/components/+dropdown/demos/alignment/menu-alignment.html b/demo/src/app/components/+dropdown/demos/alignment/menu-alignment.html
index b1efa65f76..e0fad8079e 100644
--- a/demo/src/app/components/+dropdown/demos/alignment/menu-alignment.html
+++ b/demo/src/app/components/+dropdown/demos/alignment/menu-alignment.html
@@ -1,8 +1,8 @@
-<div class="btn-group" dropdown>
-  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
+<div class="btn-group" dropdown placement="bottom right">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     This dropdown's menu is right-aligned <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-button" class="dropdown-menu-right">
+  <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" 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>
diff --git a/demo/src/app/components/+dropdown/demos/basic/basic-link.html b/demo/src/app/components/+dropdown/demos/basic/basic-link.html
index 84b60676a1..3388f78f9a 100644
--- a/demo/src/app/components/+dropdown/demos/basic/basic-link.html
+++ b/demo/src/app/components/+dropdown/demos/basic/basic-link.html
@@ -1,10 +1,8 @@
-<span dropdown (onToggle)="toggled($event)">
-  <a href id="simple-dropdown" dropdownToggle>
-    Click me for a dropdown, yo!
-  </a>
-  <ul class="dropdown-menu" dropdownMenu aria-labelledby="simple-dropdown">
-    <li *ngFor="let choice of items">
-      <a class="dropdown-item" href="#">{{choice}}</a>
-    </li>
-  </ul>
+<span dropdown (isOpenChange)="toggled($event)">
+  <a href dropdownToggle (click)="false">Click me for a dropdown, yo!</a>
+    <ul *dropdownMenu class="dropdown-menu">
+      <li *ngFor="let choice of items">
+        <a class="dropdown-item" href="#">{{choice}}</a>
+      </li>
+    </ul>
 </span>
diff --git a/demo/src/app/components/+dropdown/demos/basic/basic.html b/demo/src/app/components/+dropdown/demos/basic/basic.html
index 7440c5ab01..aae65b344b 100644
--- a/demo/src/app/components/+dropdown/demos/basic/basic.html
+++ b/demo/src/app/components/+dropdown/demos/basic/basic.html
@@ -1,12 +1,13 @@
 <div class="btn-group" dropdown>
-  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Button dropdown <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-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>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>
diff --git a/demo/src/app/components/+dropdown/demos/config/config.html b/demo/src/app/components/+dropdown/demos/config/config.html
index 2c9a24d8c0..6e878c19b1 100644
--- a/demo/src/app/components/+dropdown/demos/config/config.html
+++ b/demo/src/app/components/+dropdown/demos/config/config.html
@@ -1,10 +1,12 @@
 <div dropdown>
-  <button type="button" class="btn btn-primary" dropdownToggle>
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Button dropdown <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-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 role="menuitem"><a class="dropdown-item" href="#">Another action</a>
+    </li>
+    <li role="menuitem"><a class="dropdown-item" href="#">Something else
+      here</a></li>
   </ul>
 </div>
diff --git a/demo/src/app/components/+dropdown/demos/config/config.ts b/demo/src/app/components/+dropdown/demos/config/config.ts
index 73ce0dda07..9984b5f6b5 100644
--- a/demo/src/app/components/+dropdown/demos/config/config.ts
+++ b/demo/src/app/components/+dropdown/demos/config/config.ts
@@ -1,16 +1,10 @@
 import { Component } from '@angular/core';
-import { DropdownConfig } from 'ng2-bootstrap/dropdown';
-
-// such override allows to keep some initial values
-
-export function getDropdownConfig(): DropdownConfig {
-  return Object.assign(new DropdownConfig(), {autoClose: 'disabled', keyboardNav: true});
-}
+import { BsDropdownConfig } from 'ng2-bootstrap/dropdown';
 
 @Component({
   selector: 'demo-dropdown-config',
   templateUrl: './config.html',
-  providers: [{provide: DropdownConfig, useFactory: getDropdownConfig}]
+  providers: [{provide: BsDropdownConfig, useValue: {autoClose: false}}]
 })
 export class DemoDropdownConfigComponent {
 }
diff --git a/demo/src/app/components/+dropdown/demos/container/container.html b/demo/src/app/components/+dropdown/demos/container/container.html
index f4386e47db..eebcee5ee6 100644
--- a/demo/src/app/components/+dropdown/demos/container/container.html
+++ b/demo/src/app/components/+dropdown/demos/container/container.html
@@ -1,12 +1,13 @@
-<div class="btn-group" dropdown dropdown-append-to-body>
-  <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdownToggle>
+<div class="btn-group" dropdown container="body">
+  <button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
     Dropdown on Body <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
+  <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>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>
diff --git a/demo/src/app/components/+dropdown/demos/disabled-menu/disabled-menu.html b/demo/src/app/components/+dropdown/demos/disabled-menu/disabled-menu.html
index 6a4844096b..e3f8197d46 100644
--- a/demo/src/app/components/+dropdown/demos/disabled-menu/disabled-menu.html
+++ b/demo/src/app/components/+dropdown/demos/disabled-menu/disabled-menu.html
@@ -1,13 +1,18 @@
-<div class="btn-group" dropdown>
-  <button id="single-button" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
+<div class="btn-group" dropdown [isDisabled]="disabled">
+  <button dropdownToggle type="button" class="btn btn-primary dropdownToggle">
     Button dropdown <span class="caret"></span>
   </button>
-  <ul dropdownMenu role="menu" aria-labelledby="single-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 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>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>
-<button type="button" class="btn btn-warning" (click)="disabled = !disabled">Enable/Disable</button>
+<button type="button" class="btn btn-warning" (click)="disabled = !disabled">
+  Enable/Disable
+</button>
diff --git a/demo/src/app/components/+dropdown/demos/dropdown-demo.component.html b/demo/src/app/components/+dropdown/demos/dropdown-demo.component.html
deleted file mode 100644
index 349717ce58..0000000000
--- a/demo/src/app/components/+dropdown/demos/dropdown-demo.component.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<div (click)="$event.preventDefault()">
-  <!-- Simple dropdown -->
-  <span dropdown (onToggle)="toggled($event)">
-    <a href id="simple-dropdown" dropdownToggle>
-      Click me for a dropdown, yo!
-    </a>
-    <ul class="dropdown-menu" dropdownMenu aria-labelledby="simple-dropdown">
-      <li *ngFor="let choice of items">
-        <a class="dropdown-item" href="#">{{choice}}</a>
-      </li>
-    </ul>
-  </span>
-
-  <!-- Single button -->
-  <div class="btn-group" dropdown [(isOpen)]="status.isopen">
-    <button id="single-button" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
-      Button dropdown <span class="caret"></span>
-    </button>
-    <ul dropdownMenu role="menu" aria-labelledby="single-button">
-      <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>
-
-  <!-- Split button -->
-  <div class="btn-group" dropdown>
-    <button id="split-button" type="button" class="btn btn-danger">Action</button>
-    <button type="button" class="btn btn-danger dropdown-toggle-split" dropdownToggle>
-      <span class="caret"></span>
-      <span class="sr-only">Split button!</span>
-    </button>
-    <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="split-button">
-      <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>
-
-  <hr/>
-  <p>
-    <button type="button" class="btn btn-primary btn-sm" (click)="toggleDropdown($event)">Toggle button dropdown
-    </button>
-    <button type="button" class="btn btn-warning btn-sm" (click)="disabled = !disabled">Enable/Disable</button>
-  </p>
-
-  <hr>
-  <!-- Single button with keyboard nav -->
-  <div class="btn-group" dropdown keyboardNav="true">
-    <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdownToggle>
-      Dropdown with keyboard navigation <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="simple-btn-keyboard-nav">
-      <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>
-
-  <hr />
-  <!-- Single button using append-to-body -->
-  <div class="btn-group" dropdown dropdown-append-to-body>
-    <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdownToggle>
-      Dropdown on Body <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
-      <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>
diff --git a/demo/src/app/components/+dropdown/demos/dropdown-demo.component.ts b/demo/src/app/components/+dropdown/demos/dropdown-demo.component.ts
deleted file mode 100644
index 59f045e778..0000000000
--- a/demo/src/app/components/+dropdown/demos/dropdown-demo.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'dropdown-demo',
-  templateUrl: './dropdown-demo.component.html'
-})
-export class DropdownDemoComponent {
-  public disabled:boolean = false;
-  public status:{isopen:boolean} = {isopen: false};
-  public items:string[] = ['The first choice!',
-    'And another choice for you.', 'but wait! A third!'];
-
-  public toggled(open:boolean):void {
-    console.log('Dropdown is now: ', open);
-  }
-
-  public toggleDropdown($event:MouseEvent):void {
-    $event.preventDefault();
-    $event.stopPropagation();
-    this.status.isopen = !this.status.isopen;
-  }
-}
diff --git a/demo/src/app/components/+dropdown/demos/dropup/dropup.html b/demo/src/app/components/+dropdown/demos/dropup/dropup.html
index 62a6d46bb4..d135eb6c0f 100644
--- a/demo/src/app/components/+dropdown/demos/dropup/dropup.html
+++ b/demo/src/app/components/+dropdown/demos/dropup/dropup.html
@@ -1,12 +1,15 @@
-  <div class="btn-group dropup" dropdown>
-    <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
-      Dropup <span class="caret"></span>
-    </button>
-    <ul dropdownMenu role="menu" aria-labelledby="single-button">
+<div class="btn-group dropup" dropdown dropup>
+  <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 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>
+      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+      </li>
     </ul>
-  </div>
+</div>
diff --git a/demo/src/app/components/+dropdown/demos/index.ts b/demo/src/app/components/+dropdown/demos/index.ts
index cd74dc4c6f..c9457f3746 100644
--- a/demo/src/app/components/+dropdown/demos/index.ts
+++ b/demo/src/app/components/+dropdown/demos/index.ts
@@ -1,4 +1,3 @@
-import { DropdownDemoComponent } from './dropdown-demo.component';
 import { DemoDropdownBasicComponent } from './basic/basic';
 import { DemoDropdownSplitComponent } from './split/split';
 import { DemoDropdownContainerComponent } from './container/container';
@@ -9,11 +8,13 @@ import { DemoDropupComponent } from './dropup/dropup';
 import { DemoDropdownTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoDropdownDisabledComponent } from './disabled-menu/disabled-menu';
 import { DemoDropdownAlignmentComponent } from './alignment/menu-alignment';
+import { DemoNestedDropdownsComponent } from './nested-dropdowns/nested-dropdowns';
 
 export const DEMO_COMPONENTS = [
-  DropdownDemoComponent, DemoDropdownBasicComponent, DemoDropdownBasicLinkComponent, DemoDropdownSplitComponent,
+  DemoDropdownBasicComponent, DemoDropdownBasicLinkComponent, DemoDropdownSplitComponent,
   DemoDropdownContainerComponent, DemoDropdownKeyboardComponent, DemoDropdownConfigComponent, DemoDropupComponent,
-  DemoDropdownTriggersManualComponent, DemoDropdownDisabledComponent, DemoDropdownAlignmentComponent
+  DemoDropdownTriggersManualComponent, DemoDropdownDisabledComponent, DemoDropdownAlignmentComponent,
+  DemoNestedDropdownsComponent
 ];
 
 export const DEMOS = {
@@ -46,6 +47,10 @@ export const DEMOS = {
     component: require('!!raw-loader?lang=typescript!./alignment/menu-alignment.ts'),
     html: require('!!raw-loader?lang=markup!./alignment/menu-alignment.html')
   },
+  nested: {
+    component: require('!!raw-loader?lang=typescript!./nested-dropdowns/nested-dropdowns.ts'),
+    html: require('!!raw-loader?lang=markup!./nested-dropdowns/nested-dropdowns.html')
+  },
   keyboard: {
     component: require('!!raw-loader?lang=typescript!./keyboard/keyboard.ts'),
     html: require('!!raw-loader?lang=markup!./keyboard/keyboard.html')
diff --git a/demo/src/app/components/+dropdown/demos/keyboard/keyboard.html b/demo/src/app/components/+dropdown/demos/keyboard/keyboard.html
index f1f2648236..695005d6c2 100644
--- a/demo/src/app/components/+dropdown/demos/keyboard/keyboard.html
+++ b/demo/src/app/components/+dropdown/demos/keyboard/keyboard.html
@@ -1,12 +1,15 @@
-<div class="btn-group" dropdown keyboardNav="true">
-  <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" dropdownToggle>
+<div dropdown class="btn-group" keyboardNav="true">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
     Dropdown with keyboard navigation <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="simple-btn-keyboard-nav">
+  <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 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>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>
diff --git a/demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.html b/demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.html
new file mode 100644
index 0000000000..3db7e2b272
--- /dev/null
+++ b/demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.html
@@ -0,0 +1,32 @@
+<div class="btn-group" dropdown [autoClose]="false" container="body">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
+    This dropdown has nested submenu <span class="caret"></span>
+  </button>
+  <ul *dropdownMenu class="dropdown-menu" role="menu">
+    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
+
+    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
+      <a dropdownToggle class="dropdown-item dropdown-toggle"
+         (click)="false">Hover me for nested dropdown <span class="caret"></span></a>
+      <ul *dropdownMenu class="dropdown-menu" role="menu">
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action1</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action2</a></li>
+      </ul>
+    </li>
+
+    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
+      <a dropdownToggle class="dropdown-item dropdown-toggle"
+         (click)="false">Hover me for nested dropdown <span class="caret"></span></a>
+      <ul *dropdownMenu class="dropdown-menu" role="menu">
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action1</a></li>
+        <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Action2</a></li>
+      </ul>
+    </li>
+
+    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Something else here</a></li>
+    <li class="divider dropdown-divider"></li>
+    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested">Separated link</a></li>
+  </ul>
+</div>
diff --git a/demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.ts b/demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.ts
new file mode 100644
index 0000000000..1cbd53a2d0
--- /dev/null
+++ b/demo/src/app/components/+dropdown/demos/nested-dropdowns/nested-dropdowns.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-nested-dropdowns',
+  templateUrl: './nested-dropdowns.html'
+})
+export class DemoNestedDropdownsComponent {
+}
diff --git a/demo/src/app/components/+dropdown/demos/not-yet-supported.html b/demo/src/app/components/+dropdown/demos/not-yet-supported.html
deleted file mode 100644
index cb2e9ce27f..0000000000
--- a/demo/src/app/components/+dropdown/demos/not-yet-supported.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!-- Single button using template-url -->
-<!-- <div class="btn-group" dropdown>
-   <button id="button-template-url" type="button" class="btn btn-primary" dropdownToggle [disabled]="disabled">
-     Dropdown using template <span class="caret"></span>
-   </button>
-   <ul class="dropdown-menu" template-url="dropdown.html" aria-labelledby="button-template-url">
-   </ul>
- </div> -->
-
-<script type="text/ng-template" id="dropdown.html">
-  <ul class="dropdown-menu" role="menu" aria-labelledby="button-template-url">
-    <li role="menuitem"><a class="dropdown-item" href="#">Action in Template</a></li>
-    <li role="menuitem"><a class="dropdown-item" href="#">Another action in Template</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 in Template</a></li>
-  </ul>
-</script>
diff --git a/demo/src/app/components/+dropdown/demos/split/split.html b/demo/src/app/components/+dropdown/demos/split/split.html
index 73fed55f37..bd644ec8e2 100644
--- a/demo/src/app/components/+dropdown/demos/split/split.html
+++ b/demo/src/app/components/+dropdown/demos/split/split.html
@@ -1,14 +1,17 @@
 <div class="btn-group" dropdown>
-  <button id="split-button" type="button" class="btn btn-danger">Action</button>
-  <button type="button" class="btn btn-danger dropdown-toggle-split" dropdownToggle>
+  <button type="button" class="btn btn-danger">Action</button>
+  <button type="button" dropdownToggle class="btn btn-danger dropdown-toggle dropdown-toggle-split">
     <span class="caret"></span>
     <span class="sr-only">Split button!</span>
   </button>
-  <ul class="dropdown-menu" dropdownMenu role="menu" aria-labelledby="split-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 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>
+    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
+    </li>
   </ul>
 </div>
diff --git a/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.html b/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.html
index b63cd139f7..a96dbb7b87 100644
--- a/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.html
+++ b/demo/src/app/components/+dropdown/demos/triggers-manual/triggers-manual.html
@@ -1,15 +1,18 @@
-<div (click)="$event.preventDefault()">
-  <div class="btn-group" dropdown [isOpen]="status.isopen">
-    <button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
-      Button dropdown <span class="caret"></span>
-    </button>
-    <ul dropdownMenu role="menu" aria-labelledby="single-button">
-      <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>
-  <button type="button" class="btn btn-primary" (click)="toggleDropdown($event)">Toggle button dropdown</button>
+<div class="btn-group" dropdown [isOpen]="status.isopen">
+  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
+    Button dropdown <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>
 </div>
+<button type="button" class="btn btn-primary"
+        (click)="toggleDropdown($event)">Toggle button dropdown
+</button>
diff --git a/demo/src/app/components/+dropdown/docs/title.md b/demo/src/app/components/+dropdown/docs/title.md
index 57073db6c1..d0454e68f9 100644
--- a/demo/src/app/components/+dropdown/docs/title.md
+++ b/demo/src/app/components/+dropdown/docs/title.md
@@ -1,11 +1,11 @@
 ```typescript
 // RECOMMENDED (doesn't work with system.js)
-import { DropdownModule } from 'ng2-bootstrap/dropdown';
+import { BsDropdownModule } from 'ng2-bootstrap/dropdown';
 // or
-import { DropdownModule } from 'ng2-bootstrap';
+import { BsDropdownModule } from 'ng2-bootstrap';
 
 @NgModule({
-  imports: [DropdownModule.forRoot(),...]
+  imports: [BsDropdownModule.forRoot(),...]
 })
 export class AppModule(){} 
 ```
diff --git a/demo/src/app/components/+dropdown/dropdown-section.component.ts b/demo/src/app/components/+dropdown/dropdown-section.component.ts
index 867bbe3f7a..fe3040d8ef 100644
--- a/demo/src/app/components/+dropdown/dropdown-section.component.ts
+++ b/demo/src/app/components/+dropdown/dropdown-section.component.ts
@@ -20,6 +20,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         <li><a routerLink="." fragment="triggers-manual">Manual triggers</a></li>
         <li><a routerLink="." fragment="disabled-menu">Disabled menu</a></li>
         <li><a routerLink="." fragment="alignment">Menu alignment</a></li>
+        <li><a routerLink="." fragment="nested">Nested dropdowns (experimental)</a></li>
         <li><a routerLink="." fragment="container-body">Append to body</a></li>
         <li><a routerLink="." fragment="keyboard">Single button with keyboard nav</a></li>
         <li><a routerLink="." fragment="dropup">Dropup variation</a></li>
@@ -87,16 +88,23 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
     <demo-dropdown-alignment></demo-dropdown-alignment>
    </ng-sample-box>
   
+  <h2 routerLink="." fragment="nested" id="nested">Nested dropdowns (experimental)</h2>
+   
+   <ng-sample-box [ts]="demos.nested.component" [html]="demos.nested.html">
+     <demo-nested-dropdowns></demo-nested-dropdowns>
+   </ng-sample-box>
+  
    <h2 routerLink="." fragment="container-body" id="container-body">Append to body</h2>
    
    <ng-sample-box [ts]="demos.container.component" [html]="demos.container.html">
     <demo-dropdown-container></demo-dropdown-container>
   </ng-sample-box>
-  
-  <h2 routerLink="." fragment="keyboard" id="keyboard">Single button with keyboard nav</h2>
-   <ng-sample-box [ts]="demos.keyboard.component" [html]="demos.keyboard.html">
-    <demo-dropdown-keyboard></demo-dropdown-keyboard>
-  </ng-sample-box>
+
+  <!-- not availavle in bs-dropdown version -->
+  <!--<h2 routerLink="." fragment="keyboard" id="keyboard">Single button with keyboard nav</h2>-->
+   <!--<ng-sample-box [ts]="demos.keyboard.component" [html]="demos.keyboard.html">-->
+    <!--<demo-dropdown-keyboard></demo-dropdown-keyboard>-->
+  <!--</ng-sample-box>-->
     
   <h2 routerLink="." fragment="dropup" id="dropup">Dropup variation</h2>
   <p>Trigger dropdown menus above elements by adding <code>.dropup</code> to the parent element.</p>
@@ -111,9 +119,10 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   </ng-sample-box>
   
   <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
-  <ng-api-doc id="dropdown-directive" directive="DropdownDirective"></ng-api-doc>
-  <ng-api-doc id="dropdown-toggle-directive" directive="DropdownToggleDirective"></ng-api-doc>
-  <ng-api-doc-config id="dropdown-config" type="DropdownConfig"></ng-api-doc-config>
+  <ng-api-doc id="dropdown-directive" directive="BsDropdownDirective"></ng-api-doc>
+  <ng-api-doc id="dropdown-menu-directive" directive="BsDropdownMenuDirective"></ng-api-doc>
+  <ng-api-doc id="dropdown-toggle-directive" directive="BsDropdownToggleDirective"></ng-api-doc>
+  <ng-api-doc-config id="dropdown-config" type="BsDropdownConfig"></ng-api-doc-config>
 </demo-section>`
 })
 export class DropdownSectionComponent {
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
index 8d7709f9b3..bf341917ae 100644
--- a/demo/src/ng-api-doc.ts
+++ b/demo/src/ng-api-doc.ts
@@ -564,6 +564,10 @@ export const ngdoc: any = {
       }
     ],
     "outputs": [
+      {
+        "name": "activeDateChange",
+        "description": ""
+      },
       {
         "name": "selectionDone",
         "description": ""
@@ -696,6 +700,10 @@ export const ngdoc: any = {
       }
     ],
     "outputs": [
+      {
+        "name": "activeDateChange",
+        "description": "<p>callback to invoke when the activeDate is changed. </p>\n"
+      },
       {
         "name": "selectionDone",
         "description": ""
@@ -741,125 +749,155 @@ export const ngdoc: any = {
     "properties": [],
     "methods": []
   },
-  "KeyboardNavDirective": {
-    "fileName": "src/dropdown/dropdown-keyboard-nav.directive.ts",
-    "className": "KeyboardNavDirective",
+  "BsDropdownContainerComponent": {
+    "fileName": "src/dropdown/bs-dropdown-container.component.ts",
+    "className": "BsDropdownContainerComponent",
     "description": "",
-    "selector": "[dropdown][dropdownKeyboardNav]",
+    "selector": "bs-dropdown-container",
     "inputs": [],
     "outputs": [],
     "properties": [],
     "methods": []
   },
-  "DropdownMenuDirective": {
-    "fileName": "src/dropdown/dropdown-menu.directive.ts",
-    "className": "DropdownMenuDirective",
+  "BsDropdownMenuDirective": {
+    "fileName": "src/dropdown/bs-dropdown-menu.directive.ts",
+    "className": "BsDropdownMenuDirective",
     "description": "",
-    "selector": "[dropdownMenu]",
+    "selector": "[bsDropdownMenu],[dropdownMenu]",
     "exportAs": "bs-dropdown-menu",
     "inputs": [],
     "outputs": [],
     "properties": [],
     "methods": []
   },
-  "DropdownToggleDirective": {
-    "fileName": "src/dropdown/dropdown-toggle.directive.ts",
-    "className": "DropdownToggleDirective",
-    "description": "<p>Mark element which can toggle dropdown visibility with this directive </p>\n",
-    "selector": "[dropdownToggle]",
+  "BsDropdownToggleDirective": {
+    "fileName": "src/dropdown/bs-dropdown-toggle.directive.ts",
+    "className": "BsDropdownToggleDirective",
+    "description": "",
+    "selector": "[bsDropdownToggle],[dropdownToggle]",
     "exportAs": "bs-dropdown-toggle",
-    "inputs": [
-      {
-        "name": "addToggleClass",
-        "defaultValue": "true",
-        "type": "boolean",
-        "description": "<p>if true the dropdown-toggle class will be added to the element </p>\n"
-      },
-      {
-        "name": "isDisabled",
-        "defaultValue": "false",
-        "type": "boolean",
-        "description": "<p>if true dropdown toggle will be disabled </p>\n"
-      }
-    ],
+    "inputs": [],
     "outputs": [],
     "properties": [],
     "methods": []
   },
-  "DropdownConfig": {
-    "fileName": "src/dropdown/dropdown.config.ts",
-    "className": "DropdownConfig",
+  "BsDropdownConfig": {
+    "fileName": "src/dropdown/bs-dropdown.config.ts",
+    "className": "BsDropdownConfig",
     "description": "<p>Default dropdown configuration </p>\n",
     "methods": [],
     "properties": [
       {
         "name": "autoClose",
-        "defaultValue": "NONINPUT",
-        "type": "string",
+        "defaultValue": "true",
+        "type": "boolean",
         "description": "<p>default dropdown auto closing behavior </p>\n"
-      },
-      {
-        "name": "keyboardNav",
-        "defaultValue": "false",
-        "type": "Boolean",
-        "description": "<p>is keyboard navigation enabled by default </p>\n"
       }
     ]
   },
-  "DropdownDirective": {
-    "fileName": "src/dropdown/dropdown.directive.ts",
-    "className": "DropdownDirective",
-    "description": "<p>Mark dropdown content with this directive</p>\n",
-    "selector": "[dropdown]",
+  "BsDropdownDirective": {
+    "fileName": "src/dropdown/bs-dropdown.directive.ts",
+    "className": "BsDropdownDirective",
+    "description": "",
+    "selector": "[bsDropdown],[dropdown]",
     "exportAs": "bs-dropdown",
     "inputs": [
       {
-        "name": "appendToBody",
+        "name": "autoClose",
         "type": "boolean",
-        "description": "<p>Allows to attach dropdown to body, will be replaced with container=&quot;body&quot; </p>\n"
+        "description": "<p>Indicates that dropdown will be closed on item or document click,\nand after pressing ESC</p>\n"
       },
       {
-        "name": "autoClose",
+        "name": "container",
         "type": "string",
-        "description": "<p>behaviour vary:</p>\n<ul>\n<li>nonInput - (default) automatically closes the dropdown when any of its elements is clicked — as long as the clicked element is not an input or a textarea.</li>\n<li>always - automatically closes the dropdown when any of its elements is clicked</li>\n<li>outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown</li>\n<li>disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open</li>\n</ul>\n"
+        "description": "<p>A selector specifying the element the popover should be appended to.\nCurrently only supports &quot;body&quot;.</p>\n"
       },
       {
-        "name": "isOpen",
+        "name": "dropup",
+        "type": "boolean",
+        "description": "<p>This attribute indicates that the dropdown should be opened upwards</p>\n"
+      },
+      {
+        "name": "isDisabled",
         "type": "boolean",
-        "description": "<p>if <code>true</code> dropdown will be opened </p>\n"
+        "description": "<p>Disables dropdown toggle and hides dropdown menu if opened</p>\n"
       },
       {
-        "name": "keyboardNav",
+        "name": "isOpen",
         "type": "boolean",
-        "description": "<p>if true will enable navigation of dropdown list elements with the arrow keys </p>\n"
+        "description": "<p>Returns whether or not the popover is currently being shown</p>\n"
+      },
+      {
+        "name": "placement",
+        "type": "string",
+        "description": "<p>Placement of a popover. Accepts: &quot;top&quot;, &quot;bottom&quot;, &quot;left&quot;, &quot;right&quot;</p>\n"
+      },
+      {
+        "name": "triggers",
+        "type": "string",
+        "description": "<p>Specifies events that should trigger. Supports a space separated list of\nevent names.</p>\n"
       }
     ],
     "outputs": [
       {
-        "name": "isOpenChange",
-        "description": "<p>fired when isOpen value changes </p>\n"
+        "name": "onHidden",
+        "description": "<p>Emits an event when the popover is hidden</p>\n"
       },
       {
-        "name": "onToggle",
-        "description": "<p>fired when dropdown toggles, $event:boolean equals dropdown isOpen state </p>\n"
+        "name": "onShown",
+        "description": "<p>Emits an event when the popover is shown</p>\n"
       }
     ],
-    "properties": [],
-    "methods": []
-  },
-  "DropdownMenuInterface": {
-    "fileName": "src/dropdown/dropdown.interfaces.ts",
-    "className": "DropdownMenuInterface",
-    "description": "",
-    "methods": [],
-    "properties": []
+    "properties": [
+      {
+        "name": "autoClose",
+        "type": "boolean",
+        "description": "<p>Indicates that dropdown will be closed on item or document click,\nand after pressing ESC</p>\n"
+      },
+      {
+        "name": "isDisabled",
+        "type": "boolean",
+        "description": "<p>Disables dropdown toggle and hides dropdown menu if opened</p>\n"
+      }
+    ],
+    "methods": [
+      {
+        "name": "show",
+        "description": "<p>Opens an element’s popover. This is considered a “manual” triggering of\nthe popover.</p>\n",
+        "args": [],
+        "returnType": "void"
+      },
+      {
+        "name": "hide",
+        "description": "<p>Closes an element’s popover. This is considered a “manual” triggering of\nthe popover.</p>\n",
+        "args": [],
+        "returnType": "void"
+      },
+      {
+        "name": "toggle",
+        "description": "<p>Toggles an element’s popover. This is considered a “manual” triggering of\nthe popover.</p>\n",
+        "args": [
+          {
+            "name": "value",
+            "type": "boolean"
+          }
+        ],
+        "returnType": "void"
+      }
+    ]
   },
-  "DropdownToggleInterface": {
-    "fileName": "src/dropdown/dropdown.interfaces.ts",
-    "className": "DropdownToggleInterface",
+  "BsDropdownState": {
+    "fileName": "src/dropdown/bs-dropdown.state.ts",
+    "className": "BsDropdownState",
     "description": "",
     "methods": [],
-    "properties": []
+    "properties": [
+      {
+        "name": "dropdownMenu",
+        "type": "any",
+        "description": "<p>Content to be displayed as popover.</p>\n"
+      }
+    ]
   },
   "ModalBackdropComponent": {
     "fileName": "src/modal/modal-backdrop.component.ts",
@@ -1808,13 +1846,6 @@ export const ngdoc: any = {
     "properties": [],
     "methods": []
   },
-  "TooltipOptions": {
-    "fileName": "src/tooltip/tooltip-options.class.ts",
-    "className": "TooltipOptions",
-    "description": "<p>@deprecated </p>\n",
-    "methods": [],
-    "properties": []
-  },
   "TooltipConfig": {
     "fileName": "src/tooltip/tooltip.config.ts",
     "className": "TooltipConfig",
@@ -2006,7 +2037,7 @@ export const ngdoc: any = {
     "fileName": "src/typeahead/typeahead.directive.ts",
     "className": "TypeaheadDirective",
     "description": "",
-    "selector": "[typeahead][ngModel],[typeahead][formControlName]",
+    "selector": "[typeahead]",
     "inputs": [
       {
         "name": "container",
@@ -2092,13 +2123,13 @@ export const ngdoc: any = {
         "name": "typeaheadNoResults",
         "description": "<p>fired on every key event and returns true in case of matches are not detected </p>\n"
       },
-      {
-        "name": "typeaheadOnSelect",
-        "description": "<p>fired when option was selected, return object with data of this option </p>\n"
-      },
       {
         "name": "typeaheadOnBlur",
         "description": "<p>fired when blur event occurres. returns the active item </p>\n"
+      },
+      {
+        "name": "typeaheadOnSelect",
+        "description": "<p>fired when option was selected, return object with data of this option </p>\n"
       }
     ],
     "properties": [
diff --git a/package.json b/package.json
index 78319d20b1..570e481e47 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "@angular/platform-browser-dynamic": "^2.4.4",
     "@angular/router": "^3.4.4",
     "@angular/tsc-wrapped": "0.5.1",
-    "@types/jasmine": "2.5.46",
+    "@types/jasmine": "2.5.41",
     "@types/marked": "0.0.28",
     "@types/node": "7.0.10",
     "@types/webpack": "^2.2.2",
@@ -107,7 +107,7 @@
     "karma-sauce-launcher": "1.1.0",
     "lite-server": "2.3.0",
     "lodash": "4.17.4",
-    "markdown-loader": "github:valorkin/markdown-loader",
+    "markdown-loader": "2.0.0",
     "marked": "0.3.6",
     "ng2-page-scroll": "4.0.0-beta.4",
     "ngm-cli": "0.4.4",
diff --git a/src/dropdown/bs-dropdown-container.component.ts b/src/dropdown/bs-dropdown-container.component.ts
new file mode 100644
index 0000000000..c009091610
--- /dev/null
+++ b/src/dropdown/bs-dropdown-container.component.ts
@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
+import { BsDropdownState } from './bs-dropdown.state';
+
+@Component({
+  selector: 'bs-dropdown-container',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    style: 'display:block;position: absolute;'
+  },
+  template: `
+    <div [class.dropup]="direction === 'up'"
+         [class.dropdown]="direction === 'down'"
+         [class.show]="isOpen"
+         [class.open]="isOpen"><ng-content></ng-content></div>
+  `
+})
+export class BsDropdownContainerComponent implements OnDestroy {
+  isOpen = false;
+
+  get direction(): 'down' | 'up' {
+    return this._state.direction;
+  }
+
+  private _subscription: any;
+
+  constructor(private _state: BsDropdownState) {
+    this._subscription = _state.isOpenChange.subscribe((value: boolean) => {
+      this.isOpen = value;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+  }
+}
diff --git a/src/dropdown/bs-dropdown-menu.directive.ts b/src/dropdown/bs-dropdown-menu.directive.ts
new file mode 100644
index 0000000000..7df5d2a568
--- /dev/null
+++ b/src/dropdown/bs-dropdown-menu.directive.ts
@@ -0,0 +1,13 @@
+import { Directive, TemplateRef } from '@angular/core';
+import { BsDropdownState } from './bs-dropdown.state';
+
+@Directive({
+  selector: '[bsDropdownMenu],[dropdownMenu]',
+  exportAs: 'bs-dropdown-menu'
+})
+export class BsDropdownMenuDirective {
+  constructor(private _state: BsDropdownState,
+              private _templateRef: TemplateRef<any>) {
+    _state.resolveDropdownMenu(_templateRef);
+  }
+}
diff --git a/src/dropdown/bs-dropdown-toggle.directive.ts b/src/dropdown/bs-dropdown-toggle.directive.ts
new file mode 100644
index 0000000000..0e3726d957
--- /dev/null
+++ b/src/dropdown/bs-dropdown-toggle.directive.ts
@@ -0,0 +1,63 @@
+import {
+  Directive, ElementRef, HostBinding, HostListener, OnDestroy
+} from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+
+import { BsDropdownState } from './bs-dropdown.state';
+
+@Directive({
+  selector: '[bsDropdownToggle],[dropdownToggle]',
+  exportAs: 'bs-dropdown-toggle',
+  host: {
+    '[attr.aria-haspopup]': 'true'
+  }
+})
+export class BsDropdownToggleDirective implements OnDestroy {
+  @HostBinding('attr.disabled')
+  isDisabled: boolean = null;
+
+  // @HostBinding('class.active')
+  @HostBinding('attr.aria-expanded') isOpen: boolean;
+
+  @HostListener('click')
+  onClick(): void {
+    if (this.isDisabled) {
+      return;
+    }
+    this._state.toggleClick.emit();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: any): void {
+    if (this._state.autoClose && event.button !== 2 &&
+      !this._element.nativeElement.contains(event.target)) {
+      this._state.toggleClick.emit(false);
+    }
+  }
+
+  @HostListener('keyup.esc')
+  onEsc(): void {
+    if (this._state.autoClose) {
+      this._state.toggleClick.emit(false);
+    }
+  }
+
+  private _subscriptions: Subscription[] = [];
+
+  constructor(private _state: BsDropdownState,
+              private _element: ElementRef) {
+    // sync is open value with state
+    this._subscriptions.push(this._state
+      .isOpenChange.subscribe((value: boolean) => this.isOpen = value));
+    // populate disabled state
+    this._subscriptions.push(this._state
+      .isDisabledChange
+      .subscribe((value: boolean) => this.isDisabled = value || null));
+  }
+
+  ngOnDestroy(): void {
+    for (const sub of this._subscriptions) {
+      sub.unsubscribe();
+    }
+  }
+}
diff --git a/src/dropdown/bs-dropdown.config.ts b/src/dropdown/bs-dropdown.config.ts
new file mode 100644
index 0000000000..51d4988bcb
--- /dev/null
+++ b/src/dropdown/bs-dropdown.config.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+/** Default dropdown configuration */
+@Injectable()
+export class BsDropdownConfig {
+  /** default dropdown auto closing behavior */
+  autoClose = true;
+}
diff --git a/src/spec/dropdown.directive.spec.ts b/src/dropdown/bs-dropdown.directive.spec.ts
similarity index 91%
rename from src/spec/dropdown.directive.spec.ts
rename to src/dropdown/bs-dropdown.directive.spec.ts
index eed1ad998b..bf929cb5a0 100644
--- a/src/spec/dropdown.directive.spec.ts
+++ b/src/dropdown/bs-dropdown.directive.spec.ts
@@ -1,14 +1,13 @@
 /* tslint:disable:max-file-line-count */
 import { Component } from '@angular/core';
-import { TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 
-import { DropdownModule } from '../dropdown/dropdown.module';
-import { DropdownConfig } from '../dropdown/dropdown.config';
+import { BsDropdownConfig, BsDropdownModule } from './';
 
 const defaultHtml = `
   <div dropdown>
     <button dropdownToggle>Dropdown</button>
-    <ul dropdownMenu>
+    <ul *dropdownMenu>
       <li><a href="#">One</a></li>
       <li><a href="#">Two</a></li>
     </ul>
@@ -20,7 +19,7 @@ describe('Directive: Dropdown', () => {
   it('should be closed by default', () => {
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: defaultHtml}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -33,7 +32,7 @@ describe('Directive: Dropdown', () => {
     const html = `
       <div dropdown [(isOpen)]="isOpen">
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -41,7 +40,7 @@ describe('Directive: Dropdown', () => {
     `;
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -62,7 +61,7 @@ describe('Directive: Dropdown', () => {
   it('should toggle by click', () => {
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: defaultHtml}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -81,7 +80,7 @@ describe('Directive: Dropdown', () => {
     const html = `
       <div dropdown>
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -89,7 +88,7 @@ describe('Directive: Dropdown', () => {
     `;
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -109,7 +108,7 @@ describe('Directive: Dropdown', () => {
     const html = `
       <div dropdown>
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><input type="text"></li>
           <li><textarea>dropdown</textarea></li>
           <li><a href="#">Two</a></li>
@@ -118,7 +117,7 @@ describe('Directive: Dropdown', () => {
     `;
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -140,7 +139,7 @@ describe('Directive: Dropdown', () => {
     const html = `
       <div dropdown [autoClose]="autoClose">
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -148,7 +147,7 @@ describe('Directive: Dropdown', () => {
     `;
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -169,7 +168,7 @@ describe('Directive: Dropdown', () => {
     const html = `
       <div dropdown [autoClose]="autoClose">
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><input type="text"></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -177,7 +176,7 @@ describe('Directive: Dropdown', () => {
     `;
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -198,7 +197,7 @@ describe('Directive: Dropdown', () => {
     const html = `
       <div dropdown>
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -207,7 +206,7 @@ describe('Directive: Dropdown', () => {
     `;
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -231,7 +230,7 @@ describe('Directive: Dropdown', () => {
     const html = `
       <div dropdown [keyboardNav]="keyboardNav">
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -239,7 +238,7 @@ describe('Directive: Dropdown', () => {
     `;
     TestBed.configureTestingModule({
       declarations: [TestDropdownComponent],
-      imports: [DropdownModule.forRoot()]
+      imports: [BsDropdownModule.forRoot()]
     });
     TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
     let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -259,7 +258,7 @@ describe('Directive: Dropdown', () => {
       const html = `
       <div dropdown>
         <button dropdownToggle [isDisabled]="isDisabled">Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -267,7 +266,7 @@ describe('Directive: Dropdown', () => {
     `;
       TestBed.configureTestingModule({
         declarations: [TestDropdownComponent],
-        imports: [DropdownModule.forRoot()]
+        imports: [BsDropdownModule.forRoot()]
       });
       TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
       let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -291,7 +290,7 @@ describe('Directive: Dropdown', () => {
       const html = `
       <div dropdown>
         <button dropdownToggle>Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -299,7 +298,7 @@ describe('Directive: Dropdown', () => {
     `;
       TestBed.configureTestingModule({
         declarations: [TestDropdownComponent],
-        imports: [DropdownModule.forRoot()]
+        imports: [BsDropdownModule.forRoot()]
       });
       TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
       let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -312,7 +311,7 @@ describe('Directive: Dropdown', () => {
       const html = `
       <div dropdown>
         <button dropdownToggle [addToggleClass]="addToggleClass">Dropdown</button>
-        <ul dropdownMenu>
+        <ul *dropdownMenu>
           <li><a href="#">One</a></li>
           <li><a href="#">Two</a></li>
         </ul>
@@ -320,7 +319,7 @@ describe('Directive: Dropdown', () => {
     `;
       TestBed.configureTestingModule({
         declarations: [TestDropdownComponent],
-        imports: [DropdownModule.forRoot()]
+        imports: [BsDropdownModule.forRoot()]
       });
       TestBed.overrideComponent(TestDropdownComponent, {set: {template: html}});
       let fixture = TestBed.createComponent(TestDropdownComponent);
@@ -342,7 +341,8 @@ class TestDropdownComponent {
   public addToggleClass: Boolean = false;
   public autoClose: string = 'nonInput';
   public keyboardNav: Boolean = false;
-  public constructor(config: DropdownConfig) {
+
+  public constructor(config: BsDropdownConfig) {
     Object.assign(this, config);
   }
 }
diff --git a/src/dropdown/bs-dropdown.directive.ts b/src/dropdown/bs-dropdown.directive.ts
new file mode 100644
index 0000000000..816576e440
--- /dev/null
+++ b/src/dropdown/bs-dropdown.directive.ts
@@ -0,0 +1,193 @@
+import {
+  Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,
+  Renderer, ViewContainerRef
+} from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
+import { ComponentLoader, ComponentLoaderFactory } from '../component-loader';
+
+import { BsDropdownConfig } from './bs-dropdown.config';
+import { BsDropdownContainerComponent } from './bs-dropdown-container.component';
+import { BsDropdownState } from './bs-dropdown.state';
+
+@Directive({
+  selector: '[bsDropdown],[dropdown]',
+  exportAs: 'bs-dropdown',
+  providers: [BsDropdownState]
+})
+export class BsDropdownDirective implements OnInit, OnDestroy {
+  /**
+   * Placement of a popover. Accepts: "top", "bottom", "left", "right"
+   */
+  @Input() placement: string;
+  /**
+   * Specifies events that should trigger. Supports a space separated list of
+   * event names.
+   */
+  @Input() triggers: string;
+  /**
+   * A selector specifying the element the popover should be appended to.
+   * Currently only supports "body".
+   */
+  @Input() container: string;
+
+  /**
+   * This attribute indicates that the dropdown should be opened upwards
+   */
+  @Input() dropup: boolean;
+
+  /**
+   * Indicates that dropdown will be closed on item or document click,
+   * and after pressing ESC
+   */
+  @Input() set autoClose(value: boolean) {
+    if (typeof value === 'boolean') {
+      this._state.autoClose = value;
+    }
+  };
+
+  get autoClose(): boolean {
+    return this._state.autoClose;
+  }
+
+  /**
+   * Disables dropdown toggle and hides dropdown menu if opened
+   */
+  @Input() set isDisabled(value: boolean) {
+    this._isDisabled = value;
+    this._state.isDisabledChange.emit(value);
+    if (value) {
+      this.hide();
+    }
+  }
+
+  get isDisabled(): boolean { return this._isDisabled; }
+
+  /**
+   * Returns whether or not the popover is currently being shown
+   */
+  @Input() get isOpen(): boolean {
+    return this._dropdown.isShown;
+  }
+
+  set isOpen(value: boolean) {
+    if (value) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+
+  /**
+   * Emits an event when the popover is shown
+   */
+  @Output() onShown: EventEmitter<any>;
+  /**
+   * Emits an event when the popover is hidden
+   */
+  @Output() onHidden: EventEmitter<any>;
+
+  private _isDisabled: boolean;
+  private _dropdown: ComponentLoader<BsDropdownContainerComponent>;
+  private _subscriptions: Subscription[] = [];
+
+  constructor(private _elementRef: ElementRef,
+              private _renderer: Renderer,
+              private _viewContainerRef: ViewContainerRef,
+              private _cis: ComponentLoaderFactory,
+              private _config: BsDropdownConfig,
+              private _state: BsDropdownState) {
+    // create dropdown component loader
+    this._dropdown = this._cis
+      .createLoader<BsDropdownContainerComponent>(this._elementRef, this._viewContainerRef, this._renderer)
+      .provide({provide: BsDropdownState, useValue: this._state});
+
+    this.onShown = this._dropdown.onShown;
+    this.onHidden = this._dropdown.onHidden;
+  }
+
+  ngOnInit(): void {
+    // attach DOM listeners
+    this._dropdown.listen({
+      triggers: this.triggers,
+      show: () => this.show()
+    });
+
+    // set initial dropdown state from config
+    this._state.autoClose = this._config.autoClose;
+
+    // toggle visibility on toggle element click
+    this._subscriptions.push(this._state
+      .toggleClick.subscribe((value: boolean) => this.toggle(value)));
+
+    // hide dropdown if set disabled while opened
+    this._subscriptions.push(this._state
+      .isDisabledChange
+      .filter((value: boolean) => value === true)
+      .subscribe((value: boolean) => this.hide()));
+  }
+
+  /**
+   * Opens an element’s popover. This is considered a “manual” triggering of
+   * the popover.
+   */
+  show(): void {
+    if (this._dropdown.isShown || this.isDisabled) {
+      return;
+    }
+
+    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';
+        }
+
+        // show dropdown
+        this._dropdown
+          .attach(BsDropdownContainerComponent)
+          .to(this.container)
+          .position({attachment: this.placement})
+          .show({
+            content: dropdownMenu,
+            placement: this.placement
+          });
+
+        this._state.isOpenChange.emit(true);
+      });
+  }
+
+  /**
+   * Closes an element’s popover. This is considered a “manual” triggering of
+   * the popover.
+   */
+  hide(): void {
+    if (!this.isOpen) {
+      return;
+    }
+
+    this._dropdown.hide();
+    this._state.isOpenChange.emit(false);
+  }
+
+  /**
+   * Toggles an element’s popover. This is considered a “manual” triggering of
+   * the popover.
+   */
+  toggle(value?: boolean): void {
+    if (this.isOpen || value === false) {
+      return this.hide();
+    }
+
+    return this.show();
+  }
+
+  ngOnDestroy(): void {
+    // clean up subscriptions and destroy dropdown
+    for (const sub of this._subscriptions) {
+      sub.unsubscribe();
+    }
+    this._dropdown.dispose();
+  }
+}
diff --git a/src/dropdown/bs-dropdown.module.ts b/src/dropdown/bs-dropdown.module.ts
new file mode 100644
index 0000000000..3644724404
--- /dev/null
+++ b/src/dropdown/bs-dropdown.module.ts
@@ -0,0 +1,39 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { ComponentLoaderFactory } from '../component-loader';
+
+import { PositioningService } from '../positioning';
+import { BsDropdownContainerComponent } from './bs-dropdown-container.component';
+import { BsDropdownMenuDirective } from './bs-dropdown-menu.directive';
+import { BsDropdownToggleDirective } from './bs-dropdown-toggle.directive';
+import { BsDropdownConfig } from './bs-dropdown.config';
+
+import { BsDropdownDirective } from './bs-dropdown.directive';
+import { BsDropdownState } from './bs-dropdown.state';
+
+@NgModule({
+  declarations: [
+    BsDropdownMenuDirective,
+    BsDropdownToggleDirective,
+    BsDropdownContainerComponent,
+    BsDropdownDirective
+  ],
+  exports: [
+    BsDropdownMenuDirective,
+    BsDropdownToggleDirective,
+    BsDropdownDirective
+  ],
+  entryComponents: [BsDropdownContainerComponent]
+})
+export class BsDropdownModule {
+  public static forRoot(config?: any): ModuleWithProviders {
+    return {
+      ngModule: BsDropdownModule, providers: [
+        ComponentLoaderFactory,
+        PositioningService,
+        BsDropdownState,
+        {provide: BsDropdownConfig, useValue: config ? config : {autoClose: true}}
+      ]
+    };
+  };
+
+}
diff --git a/src/dropdown/bs-dropdown.state.ts b/src/dropdown/bs-dropdown.state.ts
new file mode 100644
index 0000000000..35ae8e3ba6
--- /dev/null
+++ b/src/dropdown/bs-dropdown.state.ts
@@ -0,0 +1,22 @@
+import { EventEmitter, Injectable, TemplateRef } from '@angular/core';
+
+@Injectable()
+export class BsDropdownState {
+  direction: 'down' | 'up' = 'down';
+  autoClose: boolean;
+  isOpenChange = new EventEmitter<boolean>();
+  isDisabledChange = new EventEmitter<boolean>();
+  toggleClick = new EventEmitter<boolean>();
+
+  /**
+   * Content to be displayed as popover.
+   */
+  dropdownMenu: Promise<TemplateRef<any>>;
+  resolveDropdownMenu: Function;
+
+  constructor() {
+    this.dropdownMenu = new Promise((resolve) => {
+      this.resolveDropdownMenu = resolve;
+    });
+  }
+}
diff --git a/src/dropdown/dropdown-menu.directive.ts b/src/dropdown/dropdown-menu.directive.ts
deleted file mode 100644
index cebf6b1c97..0000000000
--- a/src/dropdown/dropdown-menu.directive.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Directive, ElementRef, Host, HostBinding, OnInit } from '@angular/core';
-
-import { DropdownDirective } from './dropdown.directive';
-
-@Directive({
-  selector: '[dropdownMenu]',
-  exportAs: 'bs-dropdown-menu'
-})
-export class DropdownMenuDirective implements OnInit {
-  public dropdown:DropdownDirective;
-  public el:ElementRef;
-
-  /* tslint:disable:no-unused-variable */
-  @HostBinding('class.dropdown-menu')
-  public addClass:boolean = true;
-  /* tslint:enable:no-unused-variable */
-
-  public constructor(@Host() dropdown:DropdownDirective, el:ElementRef) {
-    this.dropdown = dropdown;
-    this.el = el;
-  }
-
-  public ngOnInit():void {
-    this.dropdown.dropDownMenu = this;
-  }
-}
diff --git a/src/dropdown/dropdown-toggle.directive.ts b/src/dropdown/dropdown-toggle.directive.ts
deleted file mode 100644
index b718a3018a..0000000000
--- a/src/dropdown/dropdown-toggle.directive.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  Directive, ElementRef, Host, HostBinding, HostListener, Input, OnInit
-} from '@angular/core';
-
-import { DropdownDirective } from './dropdown.directive';
-
-/** Mark element which can toggle dropdown visibility with this directive */
-@Directive({
-  selector: '[dropdownToggle]',
-  exportAs: 'bs-dropdown-toggle'
-})
-export class DropdownToggleDirective implements OnInit {
-  /** if true dropdown toggle will be disabled */
-  @HostBinding('class.disabled')
-  @Input() public isDisabled:boolean = false;
-
-  /** if true the dropdown-toggle class will be added to the element */
-  @HostBinding('class.dropdown-toggle')
-  @Input() public addToggleClass:boolean = true;
-
-  @HostBinding('attr.aria-haspopup')
-  public addClass:boolean = true;
-
-  public dropdown:DropdownDirective;
-  public el:ElementRef;
-
-  public constructor(@Host() dropdown:DropdownDirective, el:ElementRef) {
-    this.dropdown = dropdown;
-    this.el = el;
-  }
-
-  public ngOnInit():void {
-    this.dropdown.dropDownToggle = this;
-  }
-
-  @HostBinding('attr.aria-expanded')
-  public get isOpen():boolean {
-    return this.dropdown.isOpen;
-  }
-
-  @HostListener('click', ['$event'])
-  public toggleDropdown(event:Event):boolean {
-    event.stopPropagation();
-
-    if (!this.isDisabled) {
-      this.dropdown.toggle();
-    }
-    return false;
-  }
-}
diff --git a/src/dropdown/dropdown.config.ts b/src/dropdown/dropdown.config.ts
deleted file mode 100644
index 13d8a16cb4..0000000000
--- a/src/dropdown/dropdown.config.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { NONINPUT } from './dropdown.service';
-import { Injectable } from '@angular/core';
-
-/** Default dropdown configuration */
-@Injectable()
-export class DropdownConfig {
-  /** default dropdown auto closing behavior */
-  public autoClose: string = NONINPUT;
-  /** is keyboard navigation enabled by default */
-  public keyboardNav: boolean = false;
-}
diff --git a/src/dropdown/dropdown.directive.ts b/src/dropdown/dropdown.directive.ts
deleted file mode 100644
index 730cc922e7..0000000000
--- a/src/dropdown/dropdown.directive.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-/* tslint:disable:max-file-line-count */
-import {
-  ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output
-} from '@angular/core';
-
-import { isBs3 } from '../utils/ng2-bootstrap-config';
-import { DropdownService } from './dropdown.service';
-import { DropdownConfig } from './dropdown.config';
-
-/**
- * Mark dropdown content with this directive
- */
-@Directive({
-  selector: '[dropdown]',
-  exportAs: 'bs-dropdown',
-  //tslint:disable-next-line
-  host: {'[class.show]': 'isOpen && !isBs3'}
-})
-export class DropdownDirective implements OnInit, OnDestroy {
-  private dropdownService: DropdownService;
-  /** if `true` dropdown will be opened */
-  @HostBinding('class.open')
-  @HostBinding('class.active')
-  @Input()
-  public get isOpen(): boolean {
-    return this._isOpen;
-  }
-
-  public set isOpen(value: boolean) {
-    if (this._isOpen === !!value) {
-      // don't emit events
-      return;
-    }
-
-    this._isOpen = !!value;
-
-    // todo: implement after porting position
-    // if (this.appendToBody && this.menuEl) {
-    //
-    // }
-
-    // todo: $animate open<->close transitions, as soon as ng2Animate will be
-    // ready
-    if (this.isOpen) {
-      this.focusToggleElement();
-      this.dropdownService.open(this);
-    } else {
-      this.dropdownService.close(this);
-      this.selectedOption = void 0;
-    }
-    this.onToggle.emit(this.isOpen);
-    this.isOpenChange.emit(this.isOpen);
-    this._changeDetector.markForCheck();
-    // todo: implement call to setIsOpen if set and function
-  }
-
-  /** behaviour vary:
-   * - nonInput - (default) automatically closes the dropdown when any of its elements is clicked — as long as the clicked element is not an input or a textarea.
-   * - always - automatically closes the dropdown when any of its elements is clicked
-   * - outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown
-   * - disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open
-   */
-  @Input() public autoClose: string;
-  /** if true will enable navigation of dropdown list elements with the arrow keys */
-  @Input() public keyboardNav: boolean;
-  // enum string: ['always', 'outsideClick', 'disabled']
-  /** Allows to attach dropdown to body, will be replaced with container="body" */
-  @Input() public appendToBody: boolean;
-
-  /** fired when dropdown toggles, $event:boolean equals dropdown isOpen state */
-  @Output() public onToggle: EventEmitter<boolean> = new EventEmitter<boolean>(false);
-  /** fired when isOpen value changes */
-  @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>(false);
-  @HostBinding('class.dropdown') public addClass: boolean = true;
-
-  public get isBs3(): boolean {
-    return isBs3();
-  }
-
-  // index of selected element
-  public selectedOption: number;
-  // drop menu html
-  public menuEl: ElementRef;
-  // drop down toggle element
-  public toggleEl: ElementRef;
-  public el: ElementRef;
-  protected _isOpen: boolean = false;
-
-  protected _changeDetector: ChangeDetectorRef;
-
-  public constructor(
-    el: ElementRef,
-    ref: ChangeDetectorRef,
-    dropdownService: DropdownService,
-    config: DropdownConfig
-  ) {
-    // @Query('dropdownMenu', {descendants: false})
-    // dropdownMenuList:QueryList<ElementRef>) {
-    this.el = el;
-    this._changeDetector = ref;
-    this.dropdownService = dropdownService;
-    Object.assign(this, config);
-    // todo: bind to route change event
-  }
-
-  public ngOnInit(): void {
-    if (this.isOpen) {
-      // todo: watch for event get-isOpen?
-    }
-  }
-
-  public ngOnDestroy(): void {
-    if (this.appendToBody && this.menuEl) {
-      this.menuEl.nativeElement.remove();
-    }
-  }
-
-  public set dropDownMenu(dropdownMenu: { el: ElementRef }) {
-    // init drop down menu
-    this.menuEl = dropdownMenu.el;
-
-    if (this.appendToBody) {
-      window.document.body.appendChild(this.menuEl.nativeElement);
-    }
-  }
-
-  public set dropDownToggle(dropdownToggle: { el: ElementRef }) {
-    // init toggle element
-    this.toggleEl = dropdownToggle.el;
-  }
-
-  public show():void {
-    /** prevent global event handling */
-    this.dropdownService.preventEventHandling();
-    this.isOpen = true;
-  }
-
-  public hide():void {
-    /** prevent global event handling */
-    this.dropdownService.preventEventHandling();
-    this.isOpen = false;
-  }
-
-  public toggle(open?: boolean): boolean {
-    return this.isOpen = arguments.length ? !!open : !this.isOpen;
-  }
-
-  public focusDropdownEntry(keyCode: number): void {
-    // If append to body is used.
-    let hostEl = this.menuEl ?
-      this.menuEl.nativeElement :
-      this.el.nativeElement.getElementsByTagName('ul')[0];
-
-    if (!hostEl) {
-      // todo: throw exception?
-      return;
-    }
-
-    let elems = hostEl.getElementsByTagName('a');
-    if (!elems || !elems.length) {
-      // todo: throw exception?
-      return;
-    }
-
-    // todo: use parseInt to detect isNumber?
-    // todo: or implement selectedOption as a get\set pair with parseInt on set
-    switch (keyCode) {
-      case (40):
-        if (typeof this.selectedOption !== 'number') {
-          this.selectedOption = 0;
-          break;
-        }
-
-        if (this.selectedOption === elems.length - 1) {
-          break;
-        }
-
-        this.selectedOption++;
-        break;
-      case (38):
-        if (typeof this.selectedOption !== 'number') {
-          return;
-        }
-
-        if (this.selectedOption === 0) {
-          // todo: return?
-          break;
-        }
-
-        this.selectedOption--;
-        break;
-      default:
-        break;
-    }
-
-    elems[this.selectedOption].focus();
-  }
-
-  public focusToggleElement(): void {
-    if (this.toggleEl) {
-      this.toggleEl.nativeElement.focus();
-    }
-  }
-}
diff --git a/src/dropdown/dropdown.interfaces.ts b/src/dropdown/dropdown.interfaces.ts
deleted file mode 100644
index 894370fd1f..0000000000
--- a/src/dropdown/dropdown.interfaces.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ElementRef } from '@angular/core';
-
-export interface DropdownMenuInterface {
-  el:ElementRef;
-  templateUrl:string;
-}
-
-export interface DropdownToggleInterface {
-  el:ElementRef;
-}
diff --git a/src/dropdown/dropdown.module.ts b/src/dropdown/dropdown.module.ts
deleted file mode 100644
index 0e14985dd0..0000000000
--- a/src/dropdown/dropdown.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { DropdownMenuDirective } from './dropdown-menu.directive';
-import { DropdownToggleDirective } from './dropdown-toggle.directive';
-import { DropdownDirective } from './dropdown.directive';
-import { DropdownConfig } from './dropdown.config';
-import { DropdownService } from './dropdown.service';
-
-@NgModule({
-  declarations: [DropdownDirective, DropdownMenuDirective, DropdownToggleDirective],
-  exports: [DropdownDirective, DropdownMenuDirective, DropdownToggleDirective]
-})
-export class DropdownModule {
-  public static forRoot(): ModuleWithProviders {
-    return {ngModule: DropdownModule, providers: [DropdownConfig, DropdownService]};
-  }
-}
diff --git a/src/dropdown/dropdown.service.ts b/src/dropdown/dropdown.service.ts
deleted file mode 100644
index 7054072da1..0000000000
--- a/src/dropdown/dropdown.service.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { DropdownDirective } from './dropdown.directive';
-
-export const ALWAYS = 'always';
-export const DISABLED = 'disabled';
-export const OUTSIDECLICK = 'outsideClick';
-export const NONINPUT = 'nonInput';
-
-@Injectable()
-export class DropdownService {
-  private openScope:DropdownDirective;
-
-  private closeDropdownBind:EventListener = this.closeDropdown.bind(this);
-  private keybindFilterBind:EventListener = this.keybindFilter.bind(this);
-
-  private suspendedEvent: any;
-
-  public open(dropdownScope:DropdownDirective):void {
-    if (!this.openScope) {
-      window.document.addEventListener('click', this.closeDropdownBind, true);
-      window.document.addEventListener('keydown', this.keybindFilterBind);
-    }
-
-    if (this.openScope && this.openScope !== dropdownScope) {
-      this.openScope.isOpen = false;
-    }
-
-    this.openScope = dropdownScope;
-  }
-
-  public close(dropdownScope:DropdownDirective):void {
-    if (this.openScope !== dropdownScope) {
-      return;
-    }
-
-    this.openScope = void 0;
-    window.document.removeEventListener('click', this.closeDropdownBind, true);
-    window.document.removeEventListener('keydown', this.keybindFilterBind);
-  }
-
-  public preventEventHandling(): void {
-    clearTimeout(this.suspendedEvent);
-  }
-
-  protected closeDropdown(event:Event):void {
-    this.suspendedEvent = setTimeout(() => {
-      if (!this.openScope) {
-        return;
-      }
-
-      if (event && this.openScope.autoClose === DISABLED) {
-        return;
-      }
-
-      if (event && this.openScope.toggleEl &&
-        this.openScope.toggleEl.nativeElement.contains(event.target)) {
-        return;
-      }
-
-      if (event && this.openScope.autoClose === NONINPUT &&
-        this.openScope.menuEl &&
-        /input|textarea/i.test((event.target as any).tagName) &&
-        this.openScope.menuEl.nativeElement.contains(event.target)) {
-        return;
-      }
-
-      if (event && this.openScope.autoClose === OUTSIDECLICK &&
-        this.openScope.menuEl &&
-        this.openScope.menuEl.nativeElement.contains(event.target)) {
-        return;
-      }
-
-      if (event) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      this.openScope.isOpen = false;
-    }, 0);
-  }
-
-  protected keybindFilter(event: any):void {
-    if (event.which === 27) {
-      this.openScope.focusToggleElement();
-      this.closeDropdown(void 0);
-      return;
-    }
-
-    if (this.openScope.keyboardNav && this.openScope.isOpen &&
-      (event.which === 38 || event.which === 40)) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.openScope.focusDropdownEntry(event.which);
-    }
-  }
-}
diff --git a/src/dropdown/index.ts b/src/dropdown/index.ts
index fdeb242234..4d0c331762 100644
--- a/src/dropdown/index.ts
+++ b/src/dropdown/index.ts
@@ -1,7 +1,7 @@
-export { DropdownMenuInterface, DropdownToggleInterface } from './dropdown.interfaces'
-export { DropdownMenuDirective } from './dropdown-menu.directive';
-export { DropdownToggleDirective } from './dropdown-toggle.directive';
-export { DropdownDirective } from './dropdown.directive';
-export { DropdownService } from './dropdown.service'
-export { DropdownModule } from './dropdown.module';
-export { DropdownConfig } from './dropdown.config';
+export { BsDropdownDirective } from './bs-dropdown.directive';
+export { BsDropdownMenuDirective } from './bs-dropdown-menu.directive';
+export { BsDropdownToggleDirective } from './bs-dropdown-toggle.directive';
+export { BsDropdownContainerComponent } from './bs-dropdown-container.component';
+export { BsDropdownState } from './bs-dropdown.state';
+export { BsDropdownConfig } from './bs-dropdown.config';
+export { BsDropdownModule } from './bs-dropdown.module';
diff --git a/src/index.ts b/src/index.ts
index f5dc5dde2f..3b5c7ba7b9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,7 @@ import { ButtonsModule } from './buttons/buttons.module';
 import { CarouselModule } from './carousel/carousel.module';
 import { CollapseModule } from './collapse/collapse.module';
 import { DatepickerModule } from './datepicker/datepicker.module';
-import { DropdownModule } from './dropdown/dropdown.module';
+import { BsDropdownModule } from './dropdown/bs-dropdown.module';
 import { ModalModule } from './modal/modal.module';
 import { PaginationModule } from './pagination/pagination.module';
 import { ProgressbarModule } from './progressbar/progressbar.module';
@@ -45,9 +45,9 @@ export {
 } from './modal';
 
 export {
-  DropdownConfig, DropdownDirective, DropdownMenuDirective,
-  DropdownMenuInterface, DropdownModule, DropdownToggleDirective,
-  DropdownToggleInterface
+  BsDropdownModule, BsDropdownConfig, BsDropdownState,
+  BsDropdownContainerComponent, BsDropdownDirective,
+  BsDropdownMenuDirective, BsDropdownToggleDirective
 } from './dropdown';
 
 export {
@@ -101,7 +101,7 @@ export {
 const MODULES = [
   AccordionModule, AlertModule, ButtonsModule,
   CarouselModule, CollapseModule, DatepickerModule,
-  DropdownModule, ModalModule, PaginationModule,
+  BsDropdownModule, ModalModule, PaginationModule,
   ProgressbarModule, PopoverModule, RatingModule,
   TabsModule, TimepickerModule, TooltipModule,
   TypeaheadModule
@@ -112,7 +112,7 @@ const MODULES = [
     AccordionModule.forRoot(), AlertModule.forRoot(), ButtonsModule.forRoot(),
     CarouselModule.forRoot(), CollapseModule.forRoot(),
     DatepickerModule.forRoot(),
-    DropdownModule.forRoot(), ModalModule.forRoot(), PaginationModule.forRoot(),
+    BsDropdownModule.forRoot(), ModalModule.forRoot(), PaginationModule.forRoot(),
     ProgressbarModule.forRoot(), PopoverModule.forRoot(),
     RatingModule.forRoot(),
     TabsModule.forRoot(), TimepickerModule.forRoot(), TooltipModule.forRoot(),
diff --git a/src/spec/ng-bootstrap/dropdown.spec.ts b/src/spec/ng-bootstrap/dropdown.spec.ts
deleted file mode 100644
index 59d0a360bd..0000000000
--- a/src/spec/ng-bootstrap/dropdown.spec.ts
+++ /dev/null
@@ -1,384 +0,0 @@
-/* tslint:disable:max-classes-per-file max-file-line-count component-class-suffix */
-// revision 6c0b585aa4a7c13c44631915d13488e6967162f4
-import { TestBed, ComponentFixture, inject, fakeAsync, tick } from '@angular/core/testing';
-import { createGenericTestComponent } from './test/common';
-
-import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
-
-import { DropdownConfig, DropdownModule, DropdownDirective } from '../../dropdown';
-
-const createTestComponent = (html: string) =>
-  createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-
-function getDropdownEl(tc: any): any {
-  return tc.querySelector(`[dropdown]`);
-}
-
-describe('bs-dropdown', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [TestComponent],
-      imports: [DropdownModule.forRoot()],
-    });
-  });
-
-  it('should initialize inputs with provided config', inject([DropdownConfig], (defaultConfig: DropdownConfig) => {
-    const dropdown = new DropdownDirective(undefined, undefined, undefined, defaultConfig);
-    expect(dropdown.autoClose).toBe(defaultConfig.autoClose, 'unexpected autoclose setting');
-  }));
-
-  it('should be closed and down by default', () => {
-    const html = `<div dropdown></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-
-    expect(getDropdownEl(compiled)).toHaveCssClass('dropdown');
-    expect(getDropdownEl(compiled)).not.toHaveCssClass('open');
-  });
-
-  it('should be open initially if open expression is true', () => {
-    const html = `<div dropdown [isOpen]="true"></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-
-    expect(getDropdownEl(compiled)).toHaveCssClass('dropdown');
-    expect(getDropdownEl(compiled)).toHaveCssClass('open');
-  });
-
-  it('should toggle open class', () => {
-    const html = `<div dropdown [isOpen]="isOpen"></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-
-    let dropdownEl = getDropdownEl(compiled);
-
-    expect(dropdownEl).not.toHaveCssClass('open');
-
-    fixture.componentInstance.isOpen = true;
-    fixture.detectChanges();
-
-    expect(dropdownEl).toHaveCssClass('open');
-
-    fixture.componentInstance.isOpen = false;
-    fixture.detectChanges();
-
-    expect(dropdownEl).not.toHaveCssClass('open');
-  });
-
-  it('should allow toggling dropdown from outside', () => {
-    const html = `
-      <button (click)="drop.show(); $event.stopPropagation()">Open</button>
-      <button (click)="drop.hide(); $event.stopPropagation()">Close</button>
-      <button (click)="drop.toggle(); $event.stopPropagation()">Toggle</button>
-      <div dropdown #drop="bs-dropdown"></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let buttonEls = compiled.querySelectorAll('button');
-
-    buttonEls[0].click();
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    buttonEls[1].click();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-
-    buttonEls[2].click();
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    buttonEls[2].click();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-  });
-
-  it('should allow binding to open output', () => {
-    const html = `
-      <button (click)="drop.toggle(); $event.stopPropagation()">Toggle</button>
-      <div dropdown [(isOpen)]="isOpen" #drop="bs-dropdown"></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let buttonEl = compiled.querySelector('button');
-
-    expect(fixture.componentInstance.isOpen).toBe(false);
-
-    buttonEl.click();
-    fixture.detectChanges();
-
-    expect(fixture.componentInstance.isOpen).toBe(true);
-
-    buttonEl.click();
-    fixture.detectChanges();
-
-    expect(fixture.componentInstance.isOpen).toBe(false);
-  });
-
-  it('should not raise open events if open state does not change', fakeAsync(() => {
-    const html = `
-      <button (click)="drop.show(); $event.stopPropagation()">Open</button>
-      <button (click)="drop.hide(); $event.stopPropagation()">Close</button>
-      <div dropdown (isOpenChange)="recordStateChange($event)" #drop="bs-dropdown"></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let buttonEls = compiled.querySelectorAll('button');
-
-    expect(fixture.componentInstance.isOpen).toBe(false);
-    expect(fixture.componentInstance.stateChanges).toEqual([]);
-
-    buttonEls[1].click();  // close a closed one
-    fixture.detectChanges();
-    expect(fixture.componentInstance.isOpen).toBe(false);
-    expect(fixture.componentInstance.stateChanges).toEqual([]);
-
-    buttonEls[0].click();  // open a closed one
-    fixture.detectChanges();
-    expect(fixture.componentInstance.isOpen).toBe(true);
-    expect(fixture.componentInstance.stateChanges).toEqual([true]);
-
-    buttonEls[0].click();  // open an opened one
-    fixture.detectChanges();
-    tick();
-    expect(fixture.componentInstance.isOpen).toBe(true);
-    expect(fixture.componentInstance.stateChanges).toEqual([true]);
-
-    buttonEls[1].click();  // close an opened one
-    fixture.detectChanges();
-    expect(fixture.componentInstance.isOpen).toBe(false);
-    expect(fixture.componentInstance.stateChanges).toEqual([true, false]);
-  }));
-});
-
-describe('bs-dropdown-toggle', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({declarations: [TestComponent], imports: [DropdownModule.forRoot()]});
-  });
-
-  it('should toggle dropdown on click', () => {
-    const html = `
-      <div dropdown>
-          <button dropdownToggle>Toggle dropdown</button>
-      </div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let buttonEl = compiled.querySelector('button');
-
-    expect(dropdownEl).not.toHaveCssClass('open');
-    expect(buttonEl.getAttribute('aria-haspopup')).toBe('true');
-    expect(buttonEl.getAttribute('aria-expanded')).toBe('false');
-
-    buttonEl.click();
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-    expect(buttonEl.getAttribute('aria-expanded')).toBe('true');
-
-    buttonEl.click();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-    expect(buttonEl.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('should toggle dropdown on click of child of toggle', () => {
-    const html = `
-      <div dropdown>
-          <button dropdownToggle>
-            <span class="toggle">Toggle dropdown</span>
-          </button>
-      </div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let toggleEl = compiled.querySelector('.toggle');
-
-    expect(dropdownEl).not.toHaveCssClass('open');
-
-    toggleEl.click();
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    toggleEl.click();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-  });
-
-  it('should close on outside click', fakeAsync(() => {
-    const html = `<button>Outside</button><div dropdown [isOpen]="true"></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let buttonEl = compiled.querySelector('button');
-
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    buttonEl.click();
-    tick();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-  }));
-
-  it('should not close on outside click if autoClose is set to false', fakeAsync(() => {
-    const html = `<button>Outside</button><div dropdown [isOpen]="true" [autoClose]="false"></div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let buttonEl = compiled.querySelector('button');
-
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    buttonEl.click();
-    fixture.detectChanges();
-    tick();
-    expect(dropdownEl).toHaveCssClass('open');
-  }));
-
-  it('should close on ESC', fakeAsync(() => {
-    const html = `
-      <div dropdown>
-          <button dropdownToggle>Toggle dropdown</button>
-      </div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let buttonEl = compiled.querySelector('button');
-
-    buttonEl.click();
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    let event = document.createEvent('CustomEvent') as Event;
-    event.initEvent('keydown', true, true);
-    event.which = 27;
-    document.dispatchEvent(event);
-    tick();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-  }));
-
-  it('should not close on ESC if autoClose is set to false', fakeAsync(() => {
-    const html = `
-      <div dropdown [autoClose]="false">
-          <button dropdownToggle>Toggle dropdown</button>
-      </div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let buttonEl = compiled.querySelector('button');
-
-    buttonEl.click();
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    fixture.debugElement.query(By.directive(DropdownDirective)).triggerEventHandler('keyup.esc', {});
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-  }));
-
-  it('should close on item click if autoClose is set to false', fakeAsync(() => {
-    const html = `
-      <div dropdown [isOpen]="true" [autoClose]="false">
-          <button dropdownToggle>Toggle dropdown</button>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
-            <a class="dropdown-item">Action</a>
-          </div>
-      </div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let linkEl = compiled.querySelector('a');
-
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    linkEl.click();
-    tick();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-  }));
-
-  it('should close on item click', fakeAsync(() => {
-    const html = `
-      <div dropdown [isOpen]="true">
-          <button dropdownToggle>Toggle dropdown</button>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
-            <a class="dropdown-item">Action</a>
-          </div>
-      </div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-    let dropdownEl = getDropdownEl(compiled);
-    let linkEl = compiled.querySelector('a');
-
-    fixture.detectChanges();
-    expect(dropdownEl).toHaveCssClass('open');
-
-    linkEl.click();
-    tick();
-    fixture.detectChanges();
-    expect(dropdownEl).not.toHaveCssClass('open');
-  }));
-
-  it('should close on other dropdown click', () => {
-    const html = `
-      <div dropdown>
-          <button dropdownToggle>Toggle dropdown 1</button>
-          <div class="dropdown-menu">
-            <a class="dropdown-item">Action 1</a>
-          </div>
-      </div>
-      <div dropdown>
-          <button dropdownToggle>Toggle dropdown 2</button>
-          <div class="dropdown-menu">
-            <a class="dropdown-item">Action 2</a>
-          </div>
-      </div>`;
-
-    const fixture = createTestComponent(html);
-    const compiled = fixture.nativeElement;
-
-    const buttonEls = compiled.querySelectorAll('button');
-    const dropdownEls = compiled.querySelectorAll('div[dropdown]');
-
-    fixture.detectChanges();
-    expect(dropdownEls[0]).not.toHaveCssClass('open');
-    expect(dropdownEls[1]).not.toHaveCssClass('open');
-
-    buttonEls[0].click();
-    fixture.detectChanges();
-    expect(dropdownEls[0]).toHaveCssClass('open');
-    expect(dropdownEls[1]).not.toHaveCssClass('open');
-
-    buttonEls[1].click();
-    fixture.detectChanges();
-    expect(dropdownEls[0]).not.toHaveCssClass('open');
-    expect(dropdownEls[1]).toHaveCssClass('open');
-  });
-});
-
-@Component({selector: 'test-cmp', template: ''})
-class TestComponent {
-  public isOpen: string = false;
-  public stateChanges: any[] = [];
-
-  public recordStateChange($event: any): void {
-    this.stateChanges.push($event);
-    this.isOpen = $event;
-  }
-}
diff --git a/tslint.json b/tslint.json
index aaeff52c18..925ab1fb9e 100644
--- a/tslint.json
+++ b/tslint.json
@@ -2,6 +2,11 @@
   "extends": "tslint-config-valorsoft",
   "rulesDirectory": "./node_modules/codelyzer",
   "rules": {
+    "member-access": false,
+    "use-host-property-decorator": false,
+    "no-parameter-properties": false,
+    "typedef": true,
+    "no-inferrable-types": true,
     "no-forward-ref": false,
     "no-null-keyword": false,
     "only-arrow-functions": false,