Hide Buttons

Question

Wanted a help with angular, I use an ngFor to generate the buttons "-" and "+" which are the buttons that give choice to the user. So when it comes to choosing options such as the flavor of the pizza I wanted when it clicked on some flavor that "+" button would disappear.. understand ?

<ion-list *ngIf="varia.eMax > 1">
<ng-container *ngFor="let item of itensVaria">
    <ion-item class="compact" *ngIf="item.idPV == varia.idPV">
      <ion-row no-padding>
        <ion-col col-7 style="text-align: left;">
          <h2 class="h2">Descrião do item</h2>

        </ion-col>

        <ion-col col-5>
          <button ion-button icon-only clear color="danger" (click)="changeQty(item, varia, -1)">
            <ion-icon name="remove-circle"></ion-icon>
          </button>

          <!-- <button ion-button clear color="danger"> qtd do item </button> -->

          <button ion-button icon-only clear color="danger" (click)="changeQty(item, varia, 1)">
            <ion-icon name="add-circle"></ion-icon>
          </button>
        </ion-col>
      </ion-row>

    </ion-item>
</ng-container>

But as there are several flavors and the user can choose only at most 3 and at least 2 for example I wanted to click x flavor the button related to this flavor is unavailable indicating that he has already clicked on this flavor!

Answer 1

Would it be possible for you to have a variable with the flavors added.:

saboresAdicionados = [];

And put on the button a disabled calling a tasty method (item)

<button ion-button [disabled]="saborJaAdicionado(item)" icon-only clear color="danger" (click)="changeQty(item, varia, 1)">
 <ion-icon name="add-circle"></ion-icon>
</button>

The method could be as follows:

saborJaAdicionado(item){
    let achouItem = false;
    this.saboresAdicionados.foreach(e => { 
       if (e === item) achouItem = true;
    }
    return achouItem;
}

This way for each item it will test if the flavor is already added and will make the release/blocking of the flavor.