Ion-checkbox issue


#1

Hi,
I am loading list of Product Categories from database as checkbox in side menu.

loadProductCategories() {
this.CategoryList = …
}
Then I am loading these categories in my side menu:

<ion-scroll scrollY="true" style="width:100%;height:40%;overflow:hidden" #content>
      <ion-list>
        <ion-list-header color="secondary">
          Range
        </ion-list-header>
        <ion-item-group *ngFor="let range of rangeList">
          <ion-item *ngFor="let houseRange of range.HouseRangeList">
            <ion-label>{{houseRange.Brand}}</ion-label>
            <ion-checkbox color="dark" checked="false"
                          [(ngModel)]="checkedRange[houseRange._id]">
            </ion-checkbox>
          </ion-item>
        </ion-item-group>
      </ion-list>
    </ion-scroll>
  </ion-content>
  <ion-footer class="bar-stable">
    <button ion-button color="secondary" round style="left:0;right:0;margin:0; width: 100%;position: fixed;bottom:0;" menuClose="filter-menu"
      (click)="applyFilters()">
      Apply Filters
    </button>
  </ion-footer>
</ion-menu>

it creates a side menu like this :


which is perfect , if user clicks on “Apply Filters” button it works perfectly.
Problem:
The problem I am facing is if user select any option from House list and after that user closes the menu and dont click on “Apply Filter” button . The option in the menu remains selected even if user go back to the previous screen.
is there a way if user close the menu without clicking on Apply filters button to reset the menu and make all the checked checkboxes unchecked.

Thanks


#2

Sure, by using ionClose you should be able to do it


#3

Hi Kocei ,
Thanks for your reply , I have already tried using ionClose on menu :

 menuClosed() {
    this.loadProductCategories();
  }

Still the option /options shows selected.

Thanks


#4
<ion-menu  (ionOpen)="menuOpened()" menuClose="" (ionClose)="tryfast()" [content]="content">
<ion-checkbox [(ngModel)]="test" color="danger"></ion-checkbox>
  private test= true;
    tryfast() {
      this.test=false;
    }

I have tried it, and it’s working.


#5

Thanks I will give it a go.

cheers