I am having trouble getting a drop-down menu working in angular 4 using bootstrap. I've followed a few different response found here but nothing has worked. The main main menu item shows but no drop appears. I also get no errors logged anyway. I have included the latest version of the code I have. Any help would be appreciated.
Here is the application component's HTML
<app-header ></app-header>
<div class="container-fluid">
<div class="row" >
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
Here is the app-header html code.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a routerLink="/" class="navbar-brand">NEMO</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" >
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="/file-restore" *ngIf="! newHireService.isNewHireMode">File Restore</a></li>
<li class="menu-item dropdown" >
<a style="cursor: pointer;" class="dropdown-toggle" data-toggle="dropdown" >Reports<span class="caret" ></span></a>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
<ul class="dropdown-menu">
<li class="menu-item ">
<a href="#">Link 1</a>
</li>
<li class="menu-item dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
my .angular-cli.json files has the following:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "nemo-ui"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/jquery/dist/jquery.min.js",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
The problem is with your angular-cli code. You placed jquery.min.js at the css block and you also didn't load the bootstrap script.
This is how that part of your angular-cli sholuld look like:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With