From 4c71f8764b522e24860dcb57caeb704592c9dfc0 Mon Sep 17 00:00:00 2001
From: Dmitriy Shekhovtsov <valorkin@gmail.com>
Date: Thu, 12 Jan 2017 18:18:26 +0200
Subject: [PATCH] feat(bs4): upgrade to v4-alfa.6 (#1485)

* feat(carousel): upgrade carousel to v4-alpha.6

* feat(demo): update api docs to v4-alfa.6

* feat(collapse): upgrade collapse to v4-alpha.6

* feat(datepicker): upgrade datepicker to v4-alpha.6

* feat(dropdown): upgrade to 4.0.0-alpha.6

* feat(modal): upgrade modal to v4-alpha.6

* feat(popover): upgrade modal to v4-alpha.6

* feat(tooltip): upgrade modal to v4-alpha.6
---
 .../api-doc-class.component.html              |   8 +-
 .../api-doc-config.component.html             |   4 +-
 .../api-docs/api-doc/api-doc.component.html   |  20 +-
 .../carousel/demos/dynamic/dynamic.html       |  11 +-
 .../app/components/datepicker/demos/index.ts  |   4 +-
 demo/src/app/components/dropdown/todo.md      |   6 +
 .../components/modal/demos/child/child.html   |   4 +-
 .../components/modal/demos/sizes/sizes.html   |   8 +-
 .../components/modal/demos/static/static.html |   4 +-
 demo/src/app/components/todo.md               |   2 +-
 src/carousel/carousel.component.ts            |  10 +-
 src/collapse/collapse.directive.ts            |   6 +-
 src/datepicker/daypicker.component.ts         |   6 +-
 src/dropdown/dropdown.directive.ts            |  61 ++-
 src/modal/modal-backdrop.component.ts         |   5 +-
 src/modal/modal-options.class.ts              |   2 +-
 src/modal/modal.component.ts                  |   9 +-
 src/popover/popover-container.component.ts    |   6 +
 src/spec/ng-bootstrap/carousel.spec.ts        |  30 +-
 src/spec/ng-bootstrap/collapse.spec.ts        |  94 ++++
 src/spec/ng-bootstrap/dropdown.spec.ts        | 429 ++++++++++++++++++
 src/tooltip/tooltip-container.component.ts    |   6 +
 22 files changed, 654 insertions(+), 81 deletions(-)
 create mode 100644 src/spec/ng-bootstrap/collapse.spec.ts
 create mode 100644 src/spec/ng-bootstrap/dropdown.spec.ts

diff --git a/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html b/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html
index 642137fa37..8f39882cb9 100644
--- a/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html
+++ b/demo/src/app/api-docs/api-doc-class/api-doc-class.component.html
@@ -12,8 +12,8 @@ <h3 id="inputs">Properties</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
-          <td class="col-md-3"><code>{{prop.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{prop.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
             <template [ngIf]="prop.defaultValue">
               <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
@@ -32,8 +32,8 @@ <h3 id="methods">Methods</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let method of apiDocs.methods">
-          <td class="col-md-3"><code>{{method.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{method.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code>
             </div>
             <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
diff --git a/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html b/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html
index eb72f4e290..1a6433da1a 100644
--- a/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html
+++ b/demo/src/app/api-docs/api-doc-config/api-doc-config.component.html
@@ -10,8 +10,8 @@ <h3 id="inputs">Properties</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
-          <td class="col-md-3"><code>{{prop.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{prop.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
             <template [ngIf]="prop.defaultValue">
               <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
diff --git a/demo/src/app/api-docs/api-doc/api-doc.component.html b/demo/src/app/api-docs/api-doc/api-doc.component.html
index 4e489712b8..e7c4ac2956 100644
--- a/demo/src/app/api-docs/api-doc/api-doc.component.html
+++ b/demo/src/app/api-docs/api-doc/api-doc.component.html
@@ -6,12 +6,12 @@ <h3>
     <table class="table table-sm table-hover">
       <tbody>
         <tr>
-          <td class="col-md-3">Selector</td>
-          <td class="col-md-9"><code>{{apiDocs.selector}}</code></td>
+          <td class="col-xs-3">Selector</td>
+          <td class="col-xs-9"><code>{{apiDocs.selector}}</code></td>
         </tr>
         <tr *ngIf="apiDocs.exportAs">
-          <td class="col-md-3">Exported as</td>
-          <td class="col-md-9"><code>{{apiDocs.exportAs}}</code></td>
+          <td class="col-xs-3">Exported as</td>
+          <td class="col-xs-9"><code>{{apiDocs.exportAs}}</code></td>
         </tr>
       </tbody>
     </table>
@@ -22,8 +22,8 @@ <h3 id="inputs">Inputs</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let input of apiDocs.inputs">
-          <td class="col-md-3"><code>{{input.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{input.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Type: </i><code>{{ input.type }}</code></div>
             <template [ngIf]="defaultInputValue(input) || hasConfigProperty(input)">
               <div>
@@ -45,8 +45,8 @@ <h3 id="outputs">Outputs</h3>
       <table class="table table-sm table-hover">
         <tbody>
           <tr *ngFor="let output of apiDocs.outputs">
-            <td class="col-md-3"><code>{{output.name}}</code></td>
-            <td class="col-md-9"><div [innerHtml]="output.description"></div></td>
+            <td class="col-xs-3"><code>{{output.name}}</code></td>
+            <td class="col-xs-9"><div [innerHtml]="output.description"></div></td>
           </tr>
         </tbody>
       </table>
@@ -59,8 +59,8 @@ <h3 id="methods">Methods</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let method of apiDocs.methods">
-          <td class="col-md-3"><code>{{method.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{method.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
             <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
             <div [innerHtml]="method.description"></div>
diff --git a/demo/src/app/components/carousel/demos/dynamic/dynamic.html b/demo/src/app/components/carousel/demos/dynamic/dynamic.html
index 0851f4550e..52f6c0f0f1 100644
--- a/demo/src/app/components/carousel/demos/dynamic/dynamic.html
+++ b/demo/src/app/components/carousel/demos/dynamic/dynamic.html
@@ -8,7 +8,8 @@ <h4>Slide {{index}}</h4>
     </div>
   </slide>
 </carousel>
-<div class="panel card">
+<br/>
+<div>
   <button type="button" class="btn btn-info"
           (click)="addSlide()">Add Slide
   </button>
@@ -18,12 +19,12 @@ <h4>Slide {{index}}</h4>
   <button type="button" class="btn btn-info"
           (click)="removeSlide(2)">Remove #3
   </button>
-  <br>
-
+</div>
+<div>
   <div class="checkbox">
     <label><input type="checkbox" [(ngModel)]="noWrapSlides">Disable Slide Looping</label>
   </div>
 
-  <span>Interval, in milliseconds: </span><input type="number" class="form-control" [(ngModel)]="myInterval">
-  <br/><span>Enter a negative number or 0 to stop the interval.</span>
+  <span>Interval, in milliseconds (Enter a negative number or 0 to stop the interval.): </span>
+  <input type="number" class="form-control" [(ngModel)]="myInterval">
 </div>
diff --git a/demo/src/app/components/datepicker/demos/index.ts b/demo/src/app/components/datepicker/demos/index.ts
index b1fd614744..f79477a5f8 100644
--- a/demo/src/app/components/datepicker/demos/index.ts
+++ b/demo/src/app/components/datepicker/demos/index.ts
@@ -6,7 +6,7 @@ export const DEMO_COMPONENTS = [
 
 export const DEMOS = {
   old: {
-    component: require('!!raw?lang=typescript!./datepicker-demo.component.html'),
-    html: require('!!raw?lang=markup!./datepicker-demo.component')
+    component: require('!!raw?lang=typescript!./datepicker-demo.component.ts'),
+    html: require('!!raw?lang=markup!./datepicker-demo.component.html')
   }
 };
diff --git a/demo/src/app/components/dropdown/todo.md b/demo/src/app/components/dropdown/todo.md
index ab88564611..f1f3047cb8 100644
--- a/demo/src/app/components/dropdown/todo.md
+++ b/demo/src/app/components/dropdown/todo.md
@@ -9,3 +9,9 @@
 - disabled menu items
 - manual
 - config
+
++ config:
+   /** if true dropdown will be initially opened */
+    public isOpen:boolean = false;
++ config dropup
++ fix append to body
diff --git a/demo/src/app/components/modal/demos/child/child.html b/demo/src/app/components/modal/demos/child/child.html
index 199203e03b..52b503597e 100644
--- a/demo/src/app/components/modal/demos/child/child.html
+++ b/demo/src/app/components/modal/demos/child/child.html
@@ -3,10 +3,10 @@
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="hideChildModal()">
+        <h4 class="modal-title pull-left">Child modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Child modal</h4>
       </div>
       <div class="modal-body">
         I am a child modal, opened from parent component!
diff --git a/demo/src/app/components/modal/demos/sizes/sizes.html b/demo/src/app/components/modal/demos/sizes/sizes.html
index c241a98e71..d802d866d6 100644
--- a/demo/src/app/components/modal/demos/sizes/sizes.html
+++ b/demo/src/app/components/modal/demos/sizes/sizes.html
@@ -5,10 +5,10 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
+        <h4 class="modal-title pull-left">Large modal</h4>
+        <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Large modal</h4>
       </div>
       <div class="modal-body">
         ...
@@ -25,10 +25,10 @@ <h4 class="modal-title">Large modal</h4>
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="smModal.hide()">
+        <h4 class="modal-title pull-left">Small modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Small modal</h4>
       </div>
       <div class="modal-body">
         ...
diff --git a/demo/src/app/components/modal/demos/static/static.html b/demo/src/app/components/modal/demos/static/static.html
index 1d1590ad10..60bce5c644 100644
--- a/demo/src/app/components/modal/demos/static/static.html
+++ b/demo/src/app/components/modal/demos/static/static.html
@@ -5,10 +5,10 @@
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="staticModal.hide()">
+        <h4 class="modal-title pull-left">Static modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Static modal</h4>
       </div>
       <div class="modal-body">
         This is static modal, backdrop click will not close it.
diff --git a/demo/src/app/components/todo.md b/demo/src/app/components/todo.md
index bc7881a54d..5be5f5787b 100644
--- a/demo/src/app/components/todo.md
+++ b/demo/src/app/components/todo.md
@@ -10,7 +10,7 @@ for all add support of:
 + add input config
 + forms integration
 + mobile events
-+ theming
++ theming (it blocks bs4 testing)
 
 + breadcrumb
 + scrollspy
diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts
index 20d70f38da..6f3833c2a6 100644
--- a/src/carousel/carousel.component.ts
+++ b/src/carousel/carousel.component.ts
@@ -34,12 +34,12 @@ export enum Direction {UNKNOWN, NEXT, PREV}
          <li *ngFor="let slidez of slides; let i = index;" [class.active]="slidez.active === true" (click)="selectSlide(i)"></li>
       </ol>
       <div class="carousel-inner"><ng-content></ng-content></div>
-      <a class="left carousel-control" [class.disabled]="activeSlide === 0 && noWrap" (click)="previousSlide()" *ngIf="slides.length > 1">
-        <span class="icon-prev" aria-hidden="true"></span>
+      <a class="left carousel-control-prev" [class.disabled]="activeSlide === 0 && noWrap" (click)="previousSlide()" *ngIf="slides.length > 1">
+        <span class="icon-prev carousel-control-prev-icon" aria-hidden="true"></span>
         <span *ngIf="isBs4" class="sr-only">Previous</span>
       </a>
-      <a class="right carousel-control" (click)="nextSlide()"  [class.disabled]="isLast(activeSlide) && noWrap" *ngIf="slides.length > 1">
-        <span class="icon-next" aria-hidden="true"></span>
+      <a class="right carousel-control-next" (click)="nextSlide()"  [class.disabled]="isLast(activeSlide) && noWrap" *ngIf="slides.length > 1">
+        <span class="icon-next carousel-control-next-icon" aria-hidden="true"></span>
         <span *ngIf="isBs4" class="sr-only">Next</span>
       </a>
     </div>
@@ -70,7 +70,7 @@ export class CarouselComponent implements OnDestroy {
   protected _interval: number;
 
   /**
-   * Delay of item cycling in milliseconds. If false, carousel won't cycle automatically. 
+   * Delay of item cycling in milliseconds. If false, carousel won't cycle automatically.
    */
   @Input()
   public get interval(): number {
diff --git a/src/collapse/collapse.directive.ts b/src/collapse/collapse.directive.ts
index 45e3b5cfa6..916cc43bb7 100644
--- a/src/collapse/collapse.directive.ts
+++ b/src/collapse/collapse.directive.ts
@@ -5,7 +5,10 @@ import {
 } from '@angular/core';
 
 @Directive({
-  selector: '[collapse]'/*,
+  selector: '[collapse]',
+  exportAs: 'bs-collapse',
+  /* tslint:disable-next-line */
+  host: {'[class.collapse]': 'true'}/*,
   animations: [
     trigger('active', [
       state('void', style({height: 0})),
@@ -27,6 +30,7 @@ export class CollapseDirective {
   public display: string;
   // shown
   @HostBinding('class.in')
+  @HostBinding('class.show')
   @HostBinding('attr.aria-expanded')
   public isExpanded: boolean = true;
   // hidden
diff --git a/src/datepicker/daypicker.component.ts b/src/datepicker/daypicker.component.ts
index 711467a07f..1809fcb021 100644
--- a/src/datepicker/daypicker.component.ts
+++ b/src/datepicker/daypicker.component.ts
@@ -52,7 +52,7 @@ const TEMPLATE_OPTIONS: any = {
     </tr>
     <tr>
       <th *ngIf="datePicker.showWeeks"></th>
-      <th *ngFor="let labelz of labels" [ngClass]="{'text-xs-center':isBs4, 'text-center': !isBs4}">
+      <th *ngFor="let labelz of labels" class="text-center">
         <small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small>
       </th>
     </tr>
@@ -60,10 +60,10 @@ const TEMPLATE_OPTIONS: any = {
   <tbody>
     <template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
       <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
-        <td *ngIf="datePicker.showWeeks" class="h6" [ngClass]="{'text-xs-center':isBs4, 'text-center': !isBs4}">
+        <td *ngIf="datePicker.showWeeks" class="h6" class="text-center">
           <em>{{ weekNumbers[index] }}</em>
         </td>
-        <td *ngFor="let dtz of rowz" [ngClass]="{'text-xs-center':isBs4, 'text-center': !isBs4}" role="gridcell" [id]="dtz.uid">
+        <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz), 'btn-default': !isBs4}"
diff --git a/src/dropdown/dropdown.directive.ts b/src/dropdown/dropdown.directive.ts
index bc08317554..c033c4e06d 100644
--- a/src/dropdown/dropdown.directive.ts
+++ b/src/dropdown/dropdown.directive.ts
@@ -3,6 +3,7 @@ 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';
 
@@ -11,18 +12,20 @@ import { DropdownConfig } from './dropdown.config';
  */
 @Directive({
   selector: '[dropdown]',
-  exportAs: 'bs-dropdown'
+  exportAs: 'bs-dropdown',
+  //tslint:disable-next-line
+  host: {'[class.show]': 'isOpen && !isBs3'}
 })
 export class DropdownDirective implements OnInit, OnDestroy {
   /** if `true` dropdown will be opened */
   @HostBinding('class.open')
   @HostBinding('class.active')
   @Input()
-  public get isOpen():boolean {
+  public get isOpen(): boolean {
     return this._isOpen;
   }
 
-  public set isOpen(value:boolean) {
+  public set isOpen(value: boolean) {
     this._isOpen = !!value;
 
     // todo: implement after porting position
@@ -51,31 +54,35 @@ export class DropdownDirective implements OnInit, OnDestroy {
    * - 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;
+  @Input() public autoClose: string;
   /** if true will enable navigation of dropdown list elements with the arrow keys */
-  @Input() public keyboardNav:boolean;
+  @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;
+  @Input() public appendToBody: boolean;
 
   /** fired when dropdown toggles, $event:boolean equals dropdown isOpen state */
-  @Output() public onToggle:EventEmitter<boolean> = new EventEmitter<boolean>(false);
+  @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;
+  @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;
+  public selectedOption: number;
   // drop menu html
-  public menuEl:ElementRef;
+  public menuEl: ElementRef;
   // drop down toggle element
-  public toggleEl:ElementRef;
-  public el:ElementRef;
-  protected _isOpen:boolean;
+  public toggleEl: ElementRef;
+  public el: ElementRef;
+  protected _isOpen: boolean;
 
-  protected _changeDetector:ChangeDetectorRef;
+  protected _changeDetector: ChangeDetectorRef;
 
-  public constructor(el:ElementRef, ref:ChangeDetectorRef, config: DropdownConfig) {
+  public constructor(el: ElementRef, ref: ChangeDetectorRef, config: DropdownConfig) {
     // @Query('dropdownMenu', {descendants: false})
     // dropdownMenuList:QueryList<ElementRef>) {
     this.el = el;
@@ -84,19 +91,19 @@ export class DropdownDirective implements OnInit, OnDestroy {
     // todo: bind to route change event
   }
 
-  public ngOnInit():void {
+  public ngOnInit(): void {
     if (this.isOpen) {
       // todo: watch for event get-isOpen?
     }
   }
 
-  public ngOnDestroy():void {
+  public ngOnDestroy(): void {
     if (this.appendToBody && this.menuEl) {
       this.menuEl.nativeElement.remove();
     }
   }
 
-  public set dropDownMenu(dropdownMenu:{el:ElementRef}) {
+  public set dropDownMenu(dropdownMenu: { el: ElementRef }) {
     // init drop down menu
     this.menuEl = dropdownMenu.el;
 
@@ -105,16 +112,24 @@ export class DropdownDirective implements OnInit, OnDestroy {
     }
   }
 
-  public set dropDownToggle(dropdownToggle:{el:ElementRef}) {
+  public set dropDownToggle(dropdownToggle: { el: ElementRef }) {
     // init toggle element
     this.toggleEl = dropdownToggle.el;
   }
 
-  public toggle(open?:boolean):boolean {
+  public show():void {
+    this.isOpen = true;
+  }
+
+  public hide():void {
+    this.isOpen = false;
+  }
+
+  public toggle(open?: boolean): boolean {
     return this.isOpen = arguments.length ? !!open : !this.isOpen;
   }
 
-  public focusDropdownEntry(keyCode:number):void {
+  public focusDropdownEntry(keyCode: number): void {
     // If append to body is used.
     let hostEl = this.menuEl ?
       this.menuEl.nativeElement :
@@ -165,7 +180,7 @@ export class DropdownDirective implements OnInit, OnDestroy {
     elems[this.selectedOption].focus();
   }
 
-  public focusToggleElement():void {
+  public focusToggleElement(): void {
     if (this.toggleEl) {
       this.toggleEl.nativeElement.focus();
     }
diff --git a/src/modal/modal-backdrop.component.ts b/src/modal/modal-backdrop.component.ts
index 4a1a1e8141..0edb453640 100644
--- a/src/modal/modal-backdrop.component.ts
+++ b/src/modal/modal-backdrop.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, Renderer } from '@angular/core';
 
 import { ClassName } from './modal-options.class';
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 
 export class ModalBackdropOptions {
   public animate:boolean = true;
@@ -34,7 +35,9 @@ export class ModalBackdropComponent {
   public set isShown(value:boolean) {
     this._isShown = value;
     this.renderer.setElementClass(this.element.nativeElement, `${ClassName.IN}`, value);
-    this.renderer.setElementClass(this.element.nativeElement, `${ClassName.ACTIVE}`, value);
+    if (!isBs3()) {
+      this.renderer.setElementClass(this.element.nativeElement, `${ClassName.SHOW}`, value);
+    }
   }
 
   public element:ElementRef;
diff --git a/src/modal/modal-options.class.ts b/src/modal/modal-options.class.ts
index 234886694a..15b26c880d 100644
--- a/src/modal/modal-options.class.ts
+++ b/src/modal/modal-options.class.ts
@@ -33,7 +33,7 @@ export const ClassName:any = {
   OPEN: 'modal-open',
   FADE: 'fade',
   IN: 'in',         // bs3
-  ACTIVE: 'active'  // bs4
+  SHOW: 'show'  // bs4
 };
 
 export const Selector:any = {
diff --git a/src/modal/modal.component.ts b/src/modal/modal.component.ts
index 102f29905a..ca56ade3f6 100644
--- a/src/modal/modal.component.ts
+++ b/src/modal/modal.component.ts
@@ -18,6 +18,7 @@ import {
 
 import { document } from  '../utils/facade/browser';
 
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 import { Utils } from '../utils/utils.class';
 import { ModalBackdropComponent } from './modal-backdrop.component';
 import { ClassName, modalConfigDefaults, ModalOptions, Selector } from './modal-options.class';
@@ -165,7 +166,9 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
     this._isShown = false;
     this._renderer.setElementClass(this._element.nativeElement, ClassName.IN, false);
-    this._renderer.setElementClass(this._element.nativeElement, ClassName.ACTIVE, false);
+    if (!isBs3()) {
+      this._renderer.setElementClass(this._element.nativeElement, ClassName.SHOW, false);
+    }
     // this._addClassIn = false;
 
     if (this.isAnimated) {
@@ -204,7 +207,9 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
     // this._addClassIn = true;
     this._renderer.setElementClass(this._element.nativeElement, ClassName.IN, true);
-    this._renderer.setElementClass(this._element.nativeElement, ClassName.ACTIVE, true);
+    if (!isBs3()) {
+      this._renderer.setElementClass(this._element.nativeElement, ClassName.SHOW, true);
+    }
 
     const transitionComplete = () => {
       if (this._config.focus) {
diff --git a/src/popover/popover-container.component.ts b/src/popover/popover-container.component.ts
index 0145afe3e5..d0d099e906 100644
--- a/src/popover/popover-container.component.ts
+++ b/src/popover/popover-container.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Input, Component } from '@angular/core';
 import { PopoverConfig } from './popover.config';
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 
 @Component({
   selector: 'popover-container',
@@ -7,6 +8,7 @@ import { PopoverConfig } from './popover.config';
   // tslint:disable-next-line
   host: {
     '[class]': '"popover in popover-" + placement + " " + placement',
+    '[class.show]': '!isBs3',
     role: 'tooltip',
     style: 'display:block;'
   },
@@ -19,6 +21,10 @@ export class PopoverContainerComponent {
   @Input() public placement: string;
   @Input() public title: string;
 
+  public get isBs3(): boolean {
+    return isBs3();
+  }
+
   public constructor(config: PopoverConfig) {
     Object.assign(this, config);
   }
diff --git a/src/spec/ng-bootstrap/carousel.spec.ts b/src/spec/ng-bootstrap/carousel.spec.ts
index 71e4825f04..be6783db4c 100644
--- a/src/spec/ng-bootstrap/carousel.spec.ts
+++ b/src/spec/ng-bootstrap/carousel.spec.ts
@@ -139,15 +139,16 @@ describe('ngb-carousel', () => {
 
     const fixture = createTestComponent(html);
 
-    const controlElms = fixture.nativeElement.querySelectorAll('.carousel-control');
+    const prevControlElm = fixture.nativeElement.querySelector('.carousel-control-prev');
+    const nextControlElm = fixture.nativeElement.querySelector('.carousel-control-next');
 
     expectActiveSlides(fixture.nativeElement, [true, false]);
 
-    controlElms[1].click();  // next
+    nextControlElm.click();  // next
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [false, true]);
 
-    controlElms[0].click();  // prev
+    prevControlElm.click();  // prev
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [true, false]);
 
@@ -259,20 +260,20 @@ describe('ngb-carousel', () => {
     `;
 
     const fixture = createTestComponent(html);
-
-    const controlElms = fixture.nativeElement.querySelectorAll('.carousel-control');
+    const prevControlElm = fixture.nativeElement.querySelector('.carousel-control-prev');
+    const nextControlElm = fixture.nativeElement.querySelector('.carousel-control-next');
 
     expectActiveSlides(fixture.nativeElement, [true, false]);
 
-    controlElms[1].click();  // next
+    nextControlElm.click();  // next
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [false, true]);
 
-    controlElms[1].click();  // next
+    nextControlElm.click();  // next
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [true, false]);
 
-    controlElms[0].click();  // prev
+    prevControlElm.click();  // prev
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [false, true]);
 
@@ -289,19 +290,20 @@ describe('ngb-carousel', () => {
 
     const fixture = createTestComponent(html);
 
-    const controlElms = fixture.nativeElement.querySelectorAll('.carousel-control');
+    const prevControlElm = fixture.nativeElement.querySelector('.carousel-control-prev');
+    const nextControlElm = fixture.nativeElement.querySelector('.carousel-control-next');
 
     expectActiveSlides(fixture.nativeElement, [true, false]);
 
-    controlElms[0].click();  // prev
+    prevControlElm.click();  // prev
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [true, false]);
 
-    controlElms[1].click();  // next
+    nextControlElm.click();  // next
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [false, true]);
 
-    controlElms[1].click();  // next
+    nextControlElm.click();  // next
     fixture.detectChanges();
     expectActiveSlides(fixture.nativeElement, [false, true]);
 
@@ -367,7 +369,9 @@ describe('ngb-carousel', () => {
   describe('Custom config', () => {
     let config: CarouselConfig;
 
-    beforeEach(() => { TestBed.configureTestingModule({imports: [CarouselModule.forRoot()]}); });
+    beforeEach(() => {
+      TestBed.configureTestingModule({imports: [CarouselModule.forRoot()]});
+    });
 
     beforeEach(inject([CarouselConfig], (c: CarouselConfig) => {
       config = c;
diff --git a/src/spec/ng-bootstrap/collapse.spec.ts b/src/spec/ng-bootstrap/collapse.spec.ts
new file mode 100644
index 0000000000..d41bbca2e2
--- /dev/null
+++ b/src/spec/ng-bootstrap/collapse.spec.ts
@@ -0,0 +1,94 @@
+// revision 6c0b585aa4a7c13c44631915d13488e6967162f4
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { createGenericTestComponent } from './test/common';
+
+import { Component } from '@angular/core';
+
+import { CollapseModule } from '../../collapse';
+
+const createTestComponent = (html: string) =>
+  createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+
+function getCollapsibleContent(element: HTMLElement): HTMLDivElement {
+  return (element as HTMLDivElement).querySelector('.collapse');
+}
+
+describe('bs-collapse', () => {
+  let html = `<div [collapse]="collapsed">Some content</div>`;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({declarations: [TestComponent], imports: [CollapseModule]});
+    TestBed.overrideComponent(TestComponent, {set: {template: html}});
+  });
+
+  it('should have content open and aria-expanded true', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    const collapseEl = getCollapsibleContent(fixture.nativeElement);
+
+    expect(collapseEl).toHaveCssClass('in');
+    expect(collapseEl).toHaveCssClass('show');
+    expect(collapseEl.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should have content closed and aria-expanded false', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    const tc = fixture.componentInstance;
+    tc.collapsed = true;
+    fixture.detectChanges();
+
+    const collapseEl = getCollapsibleContent(fixture.nativeElement);
+
+    expect(collapseEl).not.toHaveCssClass('in');
+    expect(collapseEl).not.toHaveCssClass('show');
+    expect(collapseEl.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should toggle collapsed content based on bound model change', () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    const tc = fixture.componentInstance;
+    const collapseEl = getCollapsibleContent(fixture.nativeElement);
+    expect(collapseEl).toHaveCssClass('in');
+    expect(collapseEl).toHaveCssClass('show');
+
+    tc.collapsed = true;
+    fixture.detectChanges();
+    expect(collapseEl).not.toHaveCssClass('in');
+    expect(collapseEl).not.toHaveCssClass('show');
+
+    tc.collapsed = false;
+    fixture.detectChanges();
+    expect(collapseEl).toHaveCssClass('in');
+    expect(collapseEl).toHaveCssClass('show');
+  });
+
+  it('should allow toggling collapse from outside', () => {
+    html = `
+      <button (click)="collapse.toggle()">Collapse</button>
+      <div [collapse] #collapse="bs-collapse"></div>`;
+
+    const fixture = createTestComponent(html);
+
+    const compiled = fixture.nativeElement;
+    const collapseEl = getCollapsibleContent(compiled);
+    const buttonEl = compiled.querySelector('button');
+
+    buttonEl.click();
+    fixture.detectChanges();
+    expect(collapseEl).not.toHaveCssClass('in');
+    expect(collapseEl).not.toHaveCssClass('show');
+
+    buttonEl.click();
+    fixture.detectChanges();
+    expect(collapseEl).toHaveCssClass('in');
+    expect(collapseEl).toHaveCssClass('show');
+  });
+});
+
+@Component({selector: 'test-cmp', template: ''})
+class TestComponent {
+  public collapsed:string = false;
+}
diff --git a/src/spec/ng-bootstrap/dropdown.spec.ts b/src/spec/ng-bootstrap/dropdown.spec.ts
new file mode 100644
index 0000000000..18f3a5b218
--- /dev/null
+++ b/src/spec/ng-bootstrap/dropdown.spec.ts
@@ -0,0 +1,429 @@
+/* tslint:disable:max-classes-per-file max-file-line-count component-class-suffix */
+// revision 6c0b585aa4a7c13c44631915d13488e6967162f4
+import { TestBed, ComponentFixture, inject } from '@angular/core/testing';
+import { createGenericTestComponent } from './test/common';
+
+import { Component } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+// import { DropdownModule } from './dropdown.module';
+// import { DropdownDirective } from './dropdown';
+// import { DropdownConfig } from './dropdown-config';
+
+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]`);
+}
+
+xdescribe('bs-dropdown', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({declarations: [TestComponent], imports: [DropdownModule.forRoot()]});
+  });
+
+  xit('should initialize inputs with provided config', () => {
+    const defaultConfig = new DropdownConfig();
+    const dropdown = new DropdownDirective(defaultConfig);
+    expect(dropdown.up).toBe(defaultConfig.up);
+    expect(dropdown.autoClose).toBe(defaultConfig.autoClose);
+  });
+
+  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');
+  });
+
+  xit('should be up if up input is true', () => {
+    const html = `<div dropdown [up]="true"></div>`;
+
+    const fixture = createTestComponent(html);
+    const compiled = fixture.nativeElement;
+
+    expect(getDropdownEl(compiled)).toHaveCssClass('dropup');
+  });
+
+  xit('should be open initially if open expression is true', () => {
+    const html = `<div dropdown [open]="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', () => {
+    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();
+    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]);
+  });
+});
+
+xdescribe('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', () => {
+    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();
+    fixture.detectChanges();
+    expect(dropdownEl).not.toHaveCssClass('open');
+  });
+
+  it('should not close on outside click if autoClose is set to false', () => {
+    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();
+    expect(dropdownEl).toHaveCssClass('open');
+  });
+
+  it('should close on ESC', () => {
+    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');
+
+    fixture.debugElement.query(By.directive(DropdownDirective)).triggerEventHandler('keyup.esc', {});
+    fixture.detectChanges();
+    expect(dropdownEl).not.toHaveCssClass('open');
+  });
+
+  it('should not close on ESC if autoClose is set to false', () => {
+    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', () => {
+    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();
+    fixture.detectChanges();
+    expect(dropdownEl).toHaveCssClass('open');
+  });
+
+  it('should close on item click', () => {
+    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();
+    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');
+  });
+
+  describe('Custom config', () => {
+    let config: DropdownConfig;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({imports: [DropdownModule.forRoot()]});
+      TestBed.overrideComponent(TestComponent, {set: {template: '<div dropdown></div>'}});
+    });
+
+    beforeEach(inject([DropdownConfig], (c: DropdownConfig) => {
+      config = c;
+      config.up = true;
+    }));
+
+    it('should initialize inputs with provided config', () => {
+      const fixture = TestBed.createComponent(TestComponent);
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+
+      expect(getDropdownEl(compiled)).toHaveCssClass('dropup');
+    });
+  });
+
+  describe('Custom config as provider', () => {
+    let config = new DropdownConfig();
+    config.up = true;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+        {imports: [DropdownModule.forRoot()], providers: [{provide: DropdownConfig, useValue: config}]});
+    });
+
+    it('should initialize inputs with provided config as provider', () => {
+      const fixture = createTestComponent('<div dropdown></div>');
+      fixture.detectChanges();
+
+      const compiled = fixture.nativeElement;
+
+      expect(getDropdownEl(compiled)).toHaveCssClass('dropup');
+    });
+  });
+});
+
+@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/src/tooltip/tooltip-container.component.ts b/src/tooltip/tooltip-container.component.ts
index c2b4dfecac..715f5c4076 100644
--- a/src/tooltip/tooltip-container.component.ts
+++ b/src/tooltip/tooltip-container.component.ts
@@ -2,6 +2,7 @@ import {
   AfterViewInit, Component, ChangeDetectionStrategy, Inject
 } from '@angular/core';
 import { TooltipConfig } from './tooltip.config';
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 
 @Component({
   selector: 'bs-tooltip-container',
@@ -9,6 +10,7 @@ import { TooltipConfig } from './tooltip.config';
   // tslint:disable-next-line
   host: {
     '[class]': '"tooltip in tooltip-" + placement + " " + placement',
+    '[class.show]': '!isBs3',
     role: 'tooltip'
   },
   template: `
@@ -41,6 +43,10 @@ export class TooltipContainerComponent implements AfterViewInit {
   public popupClass: string;
   public animation: boolean;
 
+  public get isBs3(): boolean {
+    return isBs3();
+  }
+
   public constructor(config: TooltipConfig) {
     Object.assign(this, config);
   }