fix(dropdowns): fixed styling of dropdowns with bootstrap 4

README.md

@@ -1,7 +1,7 @@
 # ngx-bootstrap [![npm version](https://badge.fury.io/js/ngx-bootstrap.svg)](http://badge.fury.io/js/ngx-bootstrap) [![npm downloads](https://img.shields.io/npm/dm/ng2-bootstrap.svg)](https://npmjs.org/ngx-bootstrap)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com)
 Native Angular directives for Bootstrap 3 and Bootstrap 4
 
-[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)
+[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)
 [![Build Status](https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=master)](https://travis-ci.org/valor-software/ngx-bootstrap)
 [![codecov](https://codecov.io/gh/valor-software/ngx-bootstrap/branch/development/graph/badge.svg)](https://codecov.io/gh/valor-software/ngx-bootstrap)
 [![Dependency Status](https://david-dm.org/valor-software/ngx-bootstrap.svg)](https://david-dm.org/valor-software/ngx-bootstrap)

demo/src/app/getting-started/getting-started.md

@@ -1,6 +1,6 @@
 # ngx-bootstrap [![npm version](https://badge.fury.io/js/ngx-bootstrap.svg)](http://badge.fury.io/js/ngx-bootstrap) [![npm downloads](https://img.shields.io/npm/dm/ng2-bootstrap.svg)](https://npmjs.org/ngx-bootstrap)[![slack](https://ngx-slack.herokuapp.com/badge.svg)](https://ngx-slack.herokuapp.com)
 
-[![Angular 2 Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)
+[![Angular Style Guide](https://mgechev.github.io/angular2-style-guide/images/badge.svg)](https://angular.io/styleguide)
 [![Build Status](https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=master)](https://travis-ci.org/valor-software/ngx-bootstrap)
 [![codecov](https://codecov.io/gh/valor-software/ngx-bootstrap/branch/development/graph/badge.svg)](https://codecov.io/gh/valor-software/ngx-bootstrap)
 [![Dependency Status](https://david-dm.org/valor-software/ngx-bootstrap.svg)](https://david-dm.org/valor-software/ngx-bootstrap)

demo/src/polyfills.ts

@@ -1,4 +1,4 @@
-// This file includes polyfills needed by Angular 2 and is loaded before
+// This file includes polyfills needed by Angular and is loaded before
 // the app. You can add your own extra polyfills to this file.
 import 'ts-helpers';
 import 'core-js/es6/symbol';

docs/getting-started/angular-seed.md

@@ -27,13 +27,13 @@
   // required for dev build 
   {
     name:'ngx-bootstrap',
-    path:'node_modules/ngx-bootstrap/bundles/ng2-bootstrap.umd.min.js'
+    path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'
   },    
 
   // required for prod build
   {
     name:'ngx-bootstrap/*',
-    path:'node_modules/ngx-bootstrap/bundles/ng2-bootstrap.umd.min.js'
+    path:'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'
   },
 
   // mandatory dependency for ngx-bootstrap datepicker 

docs/getting-started/aot.md

@@ -10,9 +10,9 @@ Note that you also have to include bootstrap CSS from the official Bootrstrap si
 npm install ngx-bootstrap bootstrap --save
 ```
 
-#### 2) Edit Angular 2 module
+#### 2) Edit Angular module
 
-Open the module file where you want to include ngx-bootstrap (most probably `app.module.ts`) and import either specific ngx-bootstrap modules by listing them in the import statement and then in the import array of the Angular 2 module
+Open the module file where you want to include ngx-bootstrap (most probably `app.module.ts`) and import either specific ngx-bootstrap modules by listing them in the import statement and then in the import array of the Angular module
 
 ```typescript
 import { AlertModule } from 'ngx-bootstrap/alert';

src/dropdown/bs-dropdown.directive.ts

@@ -11,12 +11,17 @@ import { BsDropdownContainerComponent } from './bs-dropdown-container.component'
 import { BsDropdownState } from './bs-dropdown.state';
 import { BsComponentRef } from '../component-loader/bs-component-ref.class';
 import { BsDropdownMenuDirective } from './';
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 
 @Directive({
   selector: '[bsDropdown],[dropdown]',
   exportAs: 'bs-dropdown',
   providers: [BsDropdownState],
-  host: {'[class.dropup]': 'dropup'}
+  host: {
+    '[class.dropup]': 'dropup',
+    '[class.open]': 'isOpen',
+    '[class.show]': 'isOpen && isBs4'
+  }
 })
 export class BsDropdownDirective implements OnInit, OnDestroy {
   /**
@@ -69,7 +74,6 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
   /**
    * Returns whether or not the popover is currently being shown
    */
-  @HostBinding('class.open')
   @Input() get isOpen(): boolean {
     if (this._showInline) {
       return this._isInlineOpen;
@@ -94,6 +98,9 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
    */
   @Output() onHidden: EventEmitter<any>;
 
+  get isBs4(): boolean {
+    return !isBs3();
+  }
   // todo: move to component loader
   private _isInlineOpen = false;
   private _showInline: boolean;