How to use semantic ui dropdown inside angular *ngFor

Semantic ui dropdown works fine outside *ngFor but inside *ngFor it does not work. Is there solution to fix it?

<div *ngFor="let task of taskList">
  <div class="ui fluid multiple search selection dropdown">
    <input type="hidden" name="country">
    <i class="dropdown icon"></i>
    <div class="default text">Select Country</div>
    <div class="menu">
      <div class="item" data-value="af"><i class="af flag"></i>Afghanistan</div>
      <div class="item" data-value="ax"><i class="ax flag"></i>Aland Islands</div>
      <div class="item" data-value="al"><i class="al flag"></i>Albania</div>
      <div class="item" data-value="dz"><i class="dz flag"></i>Algeria</div>
      <div class="item" data-value="as"><i class="as flag"></i>American Samoa</div>
      <div class="item" data-value="zm"><i class="zm flag"></i>Zambia</div>
      <div class="item" data-value="zw"><i class="zw flag"></i>Zimbabwe</div>
    </div>
  </div>
</div>

Solution

Are you using ng2-semantic-ui for Semantic UI Javascript side?

If you dont, install:

npm install --save ng2-semantic-ui

And use like this:

<div class="ui dropdown" suiDropdown>
    <div class="menu" suiDropdownMenu>
    <div class="item" *ngFor="let task of taskList">
        your item
    </div>
    </div>
</div>

Full Documentation: https://edcarroll.github.io/ng2-semantic-ui/#/modules/dropdown