Checkbox calling button with Ionic 2

Question

I’m simulating something similar to a shopping cart using ionic 2. Basically you write the item name and value and create a checkbox list as in the image below.

But I wanted the option only appeared when selecting one of the checkbox and did not become static on the screen as it is now. How can I do this?

grid calling the Checkbox:

<ion-grid>
    <ion-row *ngFor="let item of produto">
      <ion-item>
        <ion-label (click)="clicou(item.desc)">
          {{ item.desc }} {{ item.valor }}
        </ion-label>
        <ion-checkbox checked="false"></ion-checkbox>
      </ion-item>
    </ion-row>
  </ion-grid>

part that arrow the button in the code:

<button ion-button block (click)="remove()" color="danger" style="transition: none 0s ease 0s;">
    <span class="button-inner">
      <ion-icon name="close"></ion-icon>
      Remover Selecionados
    </span>
    <div class="button-effect"></div>
  </button>

Answer 1

Add the (ionChange) calling a function and passing as parameter the $event and the item. Within its function it will be necessary to click on a vector the selected items and set the variable selecionado as true to show the button. After that, it is also necessary to check if any item has been deselected and it is necessary to remove the item from the array of selected items. If the vector is totally empty, it arrow the variable bool selecionado as false and then the button disappears.

In its component.ts

export class componente {
  private produtos: any = [
    {nome: "sabao", valor: "10"},
    {nome: "miojo", valor: "12"},
    {nome: "pasta", valor: "15"},
    {nome: "cup nudes", valor: "14"}
  ]
  private itensSelecionados: any [] = [];
  private selecionado: boolean = false;
  constructor(){}

  datachanged(e:any, item: any){
    if(e.checked){
      for (let x = 0; x < this.produtos.length; x++) {
        if(this.produtos[x].nome == item.nome){
          this.itensSelecionados.push(item);
          this.selecionado = true;   
        }      
      }
    }
    else{
      for (let x = 0; x < this.itensSelecionados.length; x++) {
        if(this.itensSelecionados[x].nome == item.nome){
          this.itensSelecionados.splice(x,1);
          if(this.itensSelecionados.length == 0){
            this.selecionado = false;
            return false;
          }
        }        
      }
    }
  }

---

On your grid.

---

    <ion-content padding>
  <ion-grid>
    <ion-row *ngFor="let item of produtos">
      <ion-item>
        <ion-label>
          {{ item.nome }} {{ item.valor }}
        </ion-label>
        <ion-checkbox checked="false" (ionChange)="datachanged($event, item)"></ion-checkbox>
      </ion-item>
    </ion-row>
  </ion-grid>
</ion-content>

---

On your button

---

 <ion-footer>
  <button *ngIf="selecionado" (click)="remove()" ion-button block color="danger" style="transition: none 0s ease 0s;">
    <span><ion-icon name="close"></ion-icon>Remover Selecionados</span>
  </button>
</ion-footer>

This solves your problem, just adjust your code.