Bootstrap Dropdown Angular 4 not working correctly

Question

I'm using Bootstrap dropdown list to display whats in the list. First time using Bootstrap with Angular 4 and it doesnt work as it should. I got three items inside the "Varukorg" but it displays on eachother and not in line.

<li *ngIf="user.personId != 2">
  <div class="dropdown" style="color:gray;">
    <span class="glyphicon glyphicon-shopping-cart" style="color:antiquewhite; margin-top:15px;">
    </span>
     Varukorg
       <div class="numberCircle" *ngIf="count != 0">
         <h6 style="margin-top:-6px; margin-left:-3px;">{{count}}
         </h6>
       </div>
       <div>
         <ul class="dropdown-content" *ngFor="let items of list">
           <li style="margin-left:-10px;">
              {{items.name}} - {{items.price}}
           </li>
        </ul>
     </div>
   </div>
</li>

Answer 1

You're creating a new "ul" element for each item in your "list" variable. You should move the *ngFor directive onto the "li" element.

    <ul class="dropdown-content">
       <li style="margin-left:-10px;" *ngFor="let items of list">
          {{items.name}} - {{items.price}}
       </li>
    </ul>

Answer 2

ngFor should be on the li element and remove the custom margin

<ul class="dropdown-content" >
           <li *ngFor="let items of list"">
              {{items.name}} - {{items.price}}
           </li>
</ul>