bootstrap dropdown list not working with each looped data

0
votes

I am working on Angular 8 where I am trying to attach a bootstrap drop-down list with each looped data

Code for bootstrap drop-down list 

 <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>

When I am attached with the looped value , button is coming but drop-down is not working

full html code 

<div *ngFor='let data of ApiData'>
  <p> {{data.name}} 

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>


    <p>
</div>
2
angularangular8angular-bootstrap
before trying it in a loop, did you try once with just one element, if not try that first. - Praveen Rao Chavan.G
where are you using dats of "ApiData" ..? - Aakash Kumar
i think it is because you have it all in a <p> tag, try adding the drop down div after the it. - Chirag Patel

2 Answers

0
votes

You don't loop on the whole Dropdown actually. If you want to show the menu from the Array that you are looping, you need to do this:

<div class="dropdown" dropdown>
<a class="dropdown-toggle btn btn-primary  text-light" dropdownToggle> Dropdown Example</a>
<ul class="dropdown-menu">
    <div *ngFor='let data of ApiData'>
            <li><a href="#">{{data.name}}</a></li>
    </div>
</ul>
</div>

Plus you need to use "let" while looping array in angular.

*ngFor='let data of ApiData'

Working Demo https://stackblitz.com/edit/bootstrap-dropdown-angular-qutu7m

0
votes

You can use ng-bootstrap

Try like this:

.ts

ApiData = [
  {name :"Test", dropdownItems : ["HTML", "CSS", "JavaScript"]}
]

.html

<div *ngFor='let data of ApiData'>
    <p> {{data.name}} </p>

    <div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
        <button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor (focus)="myDrop.open()">Dropdown Example</button>
        <ul ngbDropdownMenu aria-labelledby="dropdownManual">
            <li ngbDropdownItem *ngFor="let menu of data.dropdownItems">{{menu}}</li>
        </ul>
    </div>
</div>

Working Demo