bootstrap 4 in Angular 2 dropdown not working

1. Please install ng-bootstrap from this link Getting Started with the following command:

   npm `install --save @ng-bootstrap/ng-bootstrap`

2. Import it on app.module.ts like

   import `{NgbModule} from '@ng-bootstrap/ng-bootstrap';` 

3. Import on

   imports:[   NgbModule.forRoot(),]

4. Add ngbDropdown on dropdown

5. Add ngbDropdownToggle on dropdown Toggle DOM

6. Add ngbDropdownMenu on dropdown menu DOM

               <li ngbDropdown  class="nav-item dropdown" >                <a ngbDropdownToggle class="nav-link dropdown-toggle"  href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                 Manage                </a>                <div ngbDropdownMenu  class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                  <a class="dropdown-item" href="#">Save Data</a>                  <a class="dropdown-item" href="#">Fetch Data</a>                </div>              </li>          </ul>

Variation on @VictorLuchian for newest BS4 beta, it seems 'show' class need to be added on the dropdown-menu as well.This version include a click outside close instead of mouseout

import { Directive,HostListener,HostBinding, ElementRef } from '@angular/core'; @Directive({  selector: '[customdropdown]'})export class CustomDropdownDirective {private isOpen: boolean =false;constructor(private _el: ElementRef) { }@HostBinding('class.show') get opened() {    return this.isOpen;}@HostListener('click') open() {    this.isOpen = true;    this._el.nativeElement.querySelector('.dropdown-menu').classList.add('show')                }@HostListener('document:click', ['$event.target']) close (targetElement) {    let inside: boolean = this._el.nativeElement.contains(targetElement);    if(!inside) {        this.isOpen = false;        this._el.nativeElement.querySelector('.dropdown-menu').classList.remove('show')    }}}

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

In .angular-cli.json add the following lines to the scripts section:

# version 4.x  "scripts": [    "../node_modules/jquery/dist/jquery.js",    "../node_modules/bootstrap/dist/js/bootstrap.js",  ]

Checkout definition here