0

I am trying to hide list item which is selected and added to another list but don't know what to apply so added item does not show in list.

  <div class="countries-list">
    <span class="countries-list__header">{{'GeneralOrganizationalBackgroundSurveyComponent-STEP_6_ALL_LOCATIONS' | translate}}</span>
    <ul>
        <li *ngFor="let country of filteredCountries"
            (click)="selectCountry(country, 'add')"
            class="add"
            [ngClass]="{'selectedCountry':   selectedCountry?.name == country.name && selectedCountry?.action === 'add',
                        'disabledSelection': selectedCountry?.disabledSelection && selectedCountry?.name == country.name}">
            {{ country.name }}
        </li>
    </ul>
</div>
<div class="contries-controllers">
    <a class="btn-floating btn waves-effect waves-light cyan darken-3"
       [ngClass]="{'disabled': selectedCountry === null || selectedCountry?.action === 'delete'}"
       (click)="addCountryFromForm(selectedCountry.code)">
        <i class="material-icons">add</i>
    </a>
</div>
user8185162
  • 1
  • 2

1 Answers1

1

Seems like an exact use case for the *ngIf directive, e.g.:

<li *ngIf='!selectedCountries.includes(country.code)'.

nitind
  • 19,089
  • 4
  • 34
  • 43