How to use Bootstrap drop down in Angular2 application?

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.