Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
180 views
in Technique[技术] by (71.8m points)

html - Navbar dropdown is not showing in angular

Here is bootstrap navbar

I just copied and pasted the same code to my angular project. However the dropdown is not showing correctly.

Stackblitz Demo

I want two things to get help.

  1. Showing the dropdown.

  2. The original code used hardcode the dropdown items.

    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
    

Now I created an array in component ts file.

    this.items = [
      {name: 'Action', url: 'app/aaa'},
      {name: 'Another Action', url: 'app/bbb'},
      {name: 'Something else here', url: 'app/ccc'}
    ];

I want to use *NgFor to iterate the array instead of hard code. How to change the html?

question from:https://stackoverflow.com/questions/66051625/navbar-dropdown-is-not-showing-in-angular

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

As it is mentioned in documentation you have to include few dependencies to make Bootstrap fully working. To include libraries required by Bootstrap - you can add script tags to your index.html file. At the end of body.

<my-app>loading</my-app>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Then, to iterate through items declared in component you can use *ngFor like below:

<a class="dropdown-item" *ngFor="let item of items; let i = index" [href]="item.url">{{item.name}}</a>

Demo

If you don't want to use jQuery: - you have to implement logic which will be responsible for action after toggle is clicked.

Here you can see example which is implementing logic to toggle dropdown menu.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...