typescript - Angular 2 select or deselect checkboxes on condition -

please, note want avoid jquery , use angular 2. being said, here plunk

i have custom checkboxes, more 1 can selected. storing selected items in array this:

    eventchkarr: = [];     updatechecked(value: any, event: any) {         if (event.target.checked) {           this.eventchkarr.push(value);         }         else if (!event.target.checked) {           let index = this.eventchkarr.indexof(value);           this.eventchkarr.splice(index, 1);         }       } 

when user selects more 1 check box, modal pops (this modal not popping in plunk reason) , ask if want select multiple checkboxes. now, trying if user clicks on no button last clicked button before modal popup remain checked , on user's further clicking 1 checkbox selected @ time. if click on "yes" multiple checkboxes can selected. but, how achieve that, help? tia.

https://plnkr.co/edit/yu4p3zsq3qah9vby8m3i?p=preview

you can save checked value of each checkbox in 'eventtypechkbox' array:

 eventtypechkbox: array<{chkboximageurl: string, id: string, val: string, checked: boolean}> = [     {chkboximageurl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg" ,id: "item-1", val: "1", checked: false},     {chkboximageurl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-2", val: "2", checked: false},     {chkboximageurl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-3", val: "3", checked: false},     {chkboximageurl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-4", val: "4", checked: false}   ]; 

and can put value of 'checked' in [(ngmodel)] of each checkboxes:

<div *ngfor="let eventchk of eventtypechkbox">    <div class="col-md-3">       <label class="btn-custom">           <img src="{{eventchk.chkboximageurl}}" alt="{{eventchk.val}}" class="img-check img-circle" [ngclass]="{'check': eventchk.isclassvisible } "                        width="100" height="100">                   <input  [(ngmodel)]="eventchk.checked" (ngmodelchange)="onmodelchange(eventchk) type="checkbox" name="{{eventchk.id}}" id="{{eventchk.id}}" value="{{eventchk.val}}" class="hidden" autocomplete="off"                          (change)="updatechecked(eventchk, $event); eventchk.isclassvisible = !eventchk.isclassvisible;">                 </label>                 <p>{{eventchk.val}}</p>               </div>             </div> 

** if want use [(ngmodel)] directive:

1.you should import 'formsmodule' in 'appmodule':

import {formsmodule} "@angular/forms"; @ngmodule({   imports: [ browsermodule, formsmodule],   declarations: [ app ],   bootstrap: [ app ] }) export class appmodule {} 

2. need add different 'name' attribute each 'checkbox' input, reason used name="{{eventchk.id}}" (you need unique name) inside html

when have [(ngmodel)] can control checked , not.

if want detect model changes can use (ngmodelchange)="onmodelchange(eventchk)" on template , on class :

 onmodelchange(eventtypechkboxobj) {     if(eventtypechkboxobj.checked) {       if(this.getcheckedcount() == 2){         let result = confirm("multiple checkboxes?");         if(!result) eventtypechkboxobj.checked = false;       }       }    } 

to checked items values have no need 'eventchkarr', can filter them:

getcheckedvalues() {    return this.eventtypechkbox.filter(obj => obj.checked).map(obj => obj.val) } 

checked obj count:

 getcheckedcount():number{     return this.getcheckedvalues().length;   } 

for example:

 eventtypechkbox = [{checked:true, val:1},{checked:true, val:2},{checked:false, val:3}] 

getcheckedvalues() return:

["1","2"] 

good luck!