How to show/hide button for at least one checkbox checked in ionic3

in file HTML

<ion-list >
        <ion-item *ngFor="let item of items">
            <ion-avatar item-left="item-left">
                <img style="width:55px;height:55px;" [src]="item.avatar"></ion-avatar>
                <ion-label>
                    {{item.name}}</ion-label>
                <ion-checkbox item-end="item-end" [(ngModel)]="itemOfListCheck"   [checked]="false"></ion-checkbox>
            </ion-item>
        </ion-list>
 <div class="center"   *ngIf="visability"  > 
                    <button color="secondary" ion-button full (click)="navigateToGroupChat()">  New Group</button>
                </div>

in file .TS

export class AddChatPage {
  private visability: boolean = false;    
  itemOfListCheck :any
  constructor(  ) {
     let isSelected: any = this.officeLIST.filter((itemOfListCheck) => itemOfListCheck.checked === true);
        if(isSelected != null && isSelected.length > 0) {
        this.visability = true ;
        }else {
        this.visability =false
        };
} 

}
    items:Items[] = [
       { name: 'amr mohy', avatar: '/assets/imgs/5.png'  }, 
       { name: 'ahmed yousef', avatar: 'assets/imgs/3.png'  }   
       ];  

Model item

export interface Items {
    name : string ; 
    avatar :string
}
```![Screenshot%20from%202018-03-01%2014-07-50|274x499](upload://kPFBkvcc8QR8W6jxZEYe4muRzI2.png)

you mean this button at the bottom of the checklist?

yes
when select any one show button in bottom page

you could make (tap) method on ion-checkbox and send as parameter name of item and push it to some array if it’s not there already, and if it is just delete it from array and then *ngIf on button with this.array.length > 0, I cant think of any better solution

Hi, @Dedoo

Try this:

.html

<ion-list >
        <ion-item *ngFor="let item of items">
            <ion-avatar item-left="item-left">
                <img style="width:55px;height:55px;" [src]="item.avatar"></ion-avatar>
                <ion-label>
                    {{item.name}}</ion-label>
                <ion-checkbox item-end="item-end" [(ngModel)]="item.checkBox" (ionChange)="onChange(items)"></ion-checkbox>
            </ion-item>
        </ion-list>

 <div class="center" *ngIf="visability">
   <button color="secondary" ion-button full (click)="navigateToGroupChat()">  New Group</button>
</div>

.ts

visability:boolean = false;
items:any;

  constructor(public navCtrl: NavController) {
    
      items:Items[] = [
       { name: 'amr mohy', avatar: '/assets/imgs/5.png'  }, 
       { name: 'ahmed yousef', avatar: 'assets/imgs/3.png'  }   
       ];

       for (let i = 0; i < this.items.length; i++) {
         this.items[i].checkBox = false;
       }

  }

  onChange(items){
    console.log('onChange',items);
    let isChecked=false;
    for (let i = 0; i < items.length; i++) {
      if(items[i].checkBox == true){
        isChecked = true;
        this.visability = true;
      }
    }
    if(isChecked == false){
      this.visability = false;
    }
  }

Thanks.

3 Likes

I must be tell you Thanks :slight_smile:

Thank you… This helped me.