angularbootstrap-4angular-dragdrop

Dropdown angular

I want to do a drop down in angular, but I received only the first item from the list in the drop down. 

<div class="form-group">
     <h4>Projects</h4>
     <div *ngFor="let project of projects">
         {{project.projectName}}
     </div>

    <!-- Example single danger button -->
        <div class="btn-group">
          <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Projects
          </button>
          <div *ngFor="let project of projects" class="dropdown-menu">
             <a class="dropdown-item" href="#">{{project.projectName}} </a>
          </div>
        </div>
 </div>

In the first *ngFor I received the correct values but in the second *ngFor I received only the first item from the list. Example in the picture bellow. enter image description here Can you help me to solve this problem ?

Solution

  • Here is the correct code to solve this issue:- 

    <div  class="dropdown-menu">
       <a class="dropdown-item" href="#" *ngFor="let project of projects">{{project.projectName}} </a>
</div>

    You are applying ngfor at wrong place.