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

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

$
0
0

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)

Viewing all articles
Browse latest Browse all 229288

Trending Articles



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