I´m working with a list of element and filtering the list using pipes, the filter is multi-selection to filter using more than one value, i save the filter in the localstorage to have persistent in the filter after close the window or reload the page, in the mat-checkbox ponent i use i function in the [checked]="existInArray(color.id, filterColor)" directive to check the checkbox if the value is already in the filter array to check the checkbox, but i have a problem, if the checkbox is checked using the function, the next time i click the checkbox to uncheck it, the checkbox doesnt change the state of checked true to false, only when i clicked a second time change to checked false

Template

<mat-checkbox *ngFor="let color of filterService.getFilter(filterType.FILTER_COLOR).items.ToArray() | filterQuery:filterOptions.color"
  [checked]="existInArray(color.id, filterColor)" class="filter-checkbox" [value]="color.id" [hidden]="color.id === '999999'"
  (click)="filterBy(filterType.FILTER_COLOR, color.id, filterColor)">
  <div class="assigned">
    <div class="assigned-avatar text-center" [ngStyle]="{ 'background-color': color?.color?.bgColor }"></div>
    <p class="assigned-name">{{ color.name }}</p>
  </div>
</mat-checkbox>

Filter.ts

  public existInArray(element, array: Array<string>): boolean {
    return array.indexOf(element) > -1;
  }

  public filterBy(filterType: FilterTypeEnum, element: any, array: Array<string>) {
    this.toggleInArray(element, array);
    this.updateFilterObservable(filterType);
  }

Example, as you can see in the image, the checkbox is already checked by default because i use the existInArray function to check if the value of the check already exist in the filter array, if i try uncheck it, the first time doesn´t work, but when i click a second time the checkbox is unchecked, any idea what could be....?

I think the reason is because the [checked] is trigger before i toggle the element from the array, but no idea so far idea how to solved.... any idea.

I´m working with a list of element and filtering the list using pipes, the filter is multi-selection to filter using more than one value, i save the filter in the localstorage to have persistent in the filter after close the window or reload the page, in the mat-checkbox ponent i use i function in the [checked]="existInArray(color.id, filterColor)" directive to check the checkbox if the value is already in the filter array to check the checkbox, but i have a problem, if the checkbox is checked using the function, the next time i click the checkbox to uncheck it, the checkbox doesnt change the state of checked true to false, only when i clicked a second time change to checked false

Template

<mat-checkbox *ngFor="let color of filterService.getFilter(filterType.FILTER_COLOR).items.ToArray() | filterQuery:filterOptions.color"
  [checked]="existInArray(color.id, filterColor)" class="filter-checkbox" [value]="color.id" [hidden]="color.id === '999999'"
  (click)="filterBy(filterType.FILTER_COLOR, color.id, filterColor)">
  <div class="assigned">
    <div class="assigned-avatar text-center" [ngStyle]="{ 'background-color': color?.color?.bgColor }"></div>
    <p class="assigned-name">{{ color.name }}</p>
  </div>
</mat-checkbox>

Filter.ts

  public existInArray(element, array: Array<string>): boolean {
    return array.indexOf(element) > -1;
  }

  public filterBy(filterType: FilterTypeEnum, element: any, array: Array<string>) {
    this.toggleInArray(element, array);
    this.updateFilterObservable(filterType);
  }

Example, as you can see in the image, the checkbox is already checked by default because i use the existInArray function to check if the value of the check already exist in the filter array, if i try uncheck it, the first time doesn´t work, but when i click a second time the checkbox is unchecked, any idea what could be....?

I think the reason is because the [checked] is trigger before i toggle the element from the array, but no idea so far idea how to solved.... any idea.

• javascript
• angular
• angular-material

• Stackblitz Example will help to dive in! – Prashant Pimpale Commented Dec 10, 2018 at 13:57
• Yes sure, here you have a example of the problem: stackblitz./edit/angular-qabt5h – Miguel Frias Commented Dec 10, 2018 at 14:07
• So you want to change the color of particular checkbox on check? – Prashant Pimpale Commented Dec 10, 2018 at 14:19
• no if you can see, the first checkbox can be uncheck it on the first click – Miguel Frias Commented Dec 10, 2018 at 14:26
• Bit more descriptive? – Prashant Pimpale Commented Dec 10, 2018 at 14:27

2 Answers 2

This is a timing issue of your [checked]="existInArray(color.id)" being out of sync with your click event.... [checked]="existInArray(color.id)" happens before your click. Subscribe to the change event instead.

(change)="toggleInArray(color.id)"

Top_Select: any[] = []; // selection clear when selected... in your ts file

//on the check_click event firing add this make sure you get the index (index_chkbx) in the event

this.Top_Select[index_chkbx] = true;

in you html