How to use Bootstrap drop down in Angular2 application?

Question

In my current project I want to add the dropdowns, for that I took the code from this link. After added the below code, the dropdown appears as in the example but when I click it nothing happens.

   <li class="dropdown">
                <a [routerLink]="['/frontendai']" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Insights <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a [routerLink]="['/frontendai']">FrontEnd AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">API AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">SQL Exception</a></li>
                </ul>
            </li>

I used Bootstrap version 3.3.7, and added the below lines in my index.cshtml

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

How can I use Bootstrap dropdown in Angular 2 project?

Frederickfredericka

See here to get an idea how you can separate the code into a separate angular component. – Lindsy

Answer 1

ngx-bootstrap is available for Angular Project.(above version 2).

Here is link : http://valor-software.com/ngx-bootstrap/#/dropdowns

You can use it on your project.

Instructions

do npm install ngx-bootstrap --save

Import Dropdown Module

// RECOMMENDED (doesn't work with system.js)
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
// or
import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <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>

User

I added the ngx-bootstrap dependency in package.json but still I faced same issue. – Frederickfredericka

Did you followed instruction? or can you share any plunker? then it would be great. – User

Actually bootstrap and ngx-bootstrap is little different. I will edit answer. – User

Answer 2

To use bootstrap dropdown in angular you need add two classes - one show class at parent dropdown element i.e. dropdown and other show class at its child dropdown-menu.

To do that you can either create a dropdown compenent and pass list of values as an array to it with their click handlers or create a custom directive.

Custom Dropdown directive approach:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appDropdown]'
})
export class DropdownDirective {

  constructor(private el: ElementRef) { }

  //Binding click to Add show class 
  @HostListener('click') onclick() {

    var parent = this.el.nativeElement;//parent element
    parent.classList.toggle('show');
    var child = [].filter.call(this.el.nativeElement.children, function(ele) {
      return ele.classList.contains('dropdown-menu');
    }); //Identify the child element on dropdown clicked- dropdwon menu

    if(child.length) {
      child[0].classList.toggle('show');
    }
  }

}

Now in the template attach this at bootstrap dropdown:

<li class="nav-item dropdown" appDropdown>
   <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Username
   </a>
   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" >Profile 2</a>
      <a class="dropdown-item" >Logout 2</a>
   </div>
 </li>

NOTE - This solution is for Bootstrap 4 Dropdown only, for Boostrap 3 you need to identify the classes that need to be attached. It must be open class on parent level only.

Synergetic

Thank you this is much simpler than bringing in an extra dependency (nothing against ngx-bootstrap but this is pretty easy to implement yourself once I knew what class to add to what element). Just a note you can also just use ngClass to apply the classes to the appropriate element also I think the .toggle function on classList will add/remove as needed. – Dubuffet

IMO opinion, this should be the answer, as the accepted answer doesn't actually answer the question. – Printmaker