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?
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>
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.