Ngx-bootstrap: Dropdowns not working with bootstrap 4 alpha 6

[DouglasWebster]

I am updating a project to Bootstrap 4 alpha 6 using the ng2-bootstrap 1.3.0 but the dropdowns do not seem to be working correctly.

I created a new project using angular-cli as instructed in your getting started doc and imported ng2-bootstrap and [email protected].
The package.json is then

{
  "name": "ng2-dropdown",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    **"ng2-bootstrap": "^1.3.0",**
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.26",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

I altered the angular-cli-json file as per instructions to give

{
  "project": {
    "version": "1.0.0-beta.26",
    "name": "ng2-dropdown"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

the file app,module,ts was altered to

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { DropdownModule } from 'ng2-bootstrap/dropdown';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DropdownModule.forRoot(),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and finally app.component.html was altered to

<h1>
  {{title}}
</h1>

<div class="btn-group" dropdown>
  <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>

which is just a rip of the code for the first dropdown example from you demo page.

The above changes resulted in a page that displays the dropdown button but doesn't do anything when the button is clicked.

If I leave everything the same but uninstall bootstrap alpha 6 and install bootstrap@latest (i,e 3.3.7) and rebuild then everything works O.K.
Uninstalling bootstrap 3.3.7 and installing [email protected] then rebuilding also has the dropdown working O.K

[fchiumeo]

same this #1458

[valorkin]

Add to index.html

<!-- Enable bootstrap 4 theme -->
<script>window.__theme = 'bs4';</script>

I will replace it with smarter template switcher later

[valorkin]

as @fchiumeo it is a duplicate of closed issue,
but please drop a note when you will apply my comment

[DouglasWebster]

Thanks for the answer, added the code to index.html and dropdowns now works for bootstrap 4 alpha 6 and alpha 5. Also seems to work with Bootstrap 3, is it a mistake to leave it in with Bootstrap 3 or will it give problems my short test does not highlight?

[valorkin]

It could be unintentional, I will separate them better later

[GRTO]

I did that, but dropdown menu doesn't show the options

[valorkin]

@GRTO alfa is not supported, only bs4 beta, there are were breaking changes in bootstrap.css