bootstrap 4 in Angular 2 dropdown not working

Question

I have followed the following to install bootstrap 4 into my Angular 2 project: Accepted Answer, following the first 1,2,3 and 4 steps

However when I add the following HTML to my header component:

<nav class="navbar-dark bg-inverse">
<div class="container">
    <a href="#" class="navbar-brand"></a>
    <ul class="nav navbar-nav float-xs-right">
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" id="nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">[email protected]</a>
            <div class="dropdown-menu" aria-labelledby="nav-dropdown">
                <a href="#" class="dropdown-item">Sign Out</a>
            </div>
        </li>
    </ul>
</div>

As you can see its a dropdown basically, when I click on the dropdown the page refreshes, instead it doesn't display the 'sign out' option.

This is my angular-cli.json styles section:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],    

And inside my Angular 2 module:

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

I then import NgbModule into the imports section.

I've clearly missed something, can someone shed any light into what it maybe exactly?

Answer 1

Like Andrien's said, you can simplify the code like this.

constructor(private _el: ElementRef) { }

@HostBinding('class.show') isOpen = false;

@HostListener('click') toogleOpen() {
    this.isOpen = !this.isOpen;
    this._el.nativeElement.querySelector('.dropdown-menu').classList.toggle('show')
}

Answer 2

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>