Kyle
Kyle

Reputation: 11

Bootstrap navbar dropdown in Angularjs doesn't work

The function I uses of bootstrap navbar dropdown doesn't work. My html code

It runs correctly on plunker. But when I run the same code. My running page becomes as follow:

enter image description

When I click the Dropdown link, browser direct to "example.com"

This is my dependencies:

"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",

"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"

Can anyone can help me to figure it out? Thank you!

Upvotes: 1

Views: 164

Answers (1)

Shiladitya
Shiladitya

Reputation: 12161

There are two thing you need to change.

  1. In the HTML page, replace the href="http://example.com" with href="#".

  2. You missed bootstrap.min.js. Add the script <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>.

I tested in my local, mostly the issue is missing of bootstrap.min.js (bootstrap library file).

Upvotes: 1

Related Questions