I am currently working on a list of elements and implementing a filter using pipes. The filter allows for multi-selection, so users can filter the list by more than one value at a time. To ensure that the filter persists even when the window is closed or the page is reloaded, I save the filter in the local storage.
Within the mat-checkbox component, I utilize a function in the
[checked]="existInArray(color.id, filterColor)"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);
}
https://i.stack.imgur.com/wEubO.png
In the provided example image, you can see that the checkbox is already checked by default. This is because I utilize the existInArray function to check if the value of the checkbox already exists in the filter array. However, when attempting to uncheck the checkbox, it does not work on the first click. It only changes its state to unchecked after clicking on it a second time. Any suggestions on what might be causing this issue?
I suspect that the [checked] directive is triggered before toggling the corresponding element in the array. However, I am unsure how to resolve this issue at the moment. Any ideas would be much appreciated.