Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 229339

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

$
0
0

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.


Viewing all articles
Browse latest Browse all 229339

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>