1

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!

1
  • 1
    Remove the href="http://example.com" link or change it to #. Commented Aug 9, 2017 at 3:40

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

3 Comments

Follow your first suggestion, I change the href. But bootstrap.min.js has already added to my file. After I replace "example.com" with "#", it still has the same problem.
Not yet, the problem still comes out.
Yes, bootstrap.min.js is loaded. I used Starter template code from v4-alpha.getbootstrap.com/getting-started/introduction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.