Checkbox [checked] directive angular2+ weird behavior

I have a simple dropdown that contains some filters.

when clicking on a filter, i would like the table to show only items with this sub-category.

when clicking on an li element, it works perfectly fine and the checkbox is chekced. when i press on the checkbox itself (the input) the table does show the required result, but the checkbox is not being checked.

HTML :

<ng-container *ngIf="multi; else singleSelectItem">
            <li class="list-item" *ngFor="let item of filteredData; index as i" (click)="setFilter(item)" stopPropagation>
                <input type="checkbox" class="hidden-box" [id]="i+item" stopPropagation (click)="setFilter(item)" [checked]="checkIfChecked(item)">
                <label [for]="i+item" class="check--label" btnCheckbox>
                    <span class="check--label-box"></span>
                </label>
                <span>
                    
                </span>
            </li>
        </ng-container>

TS:

  checkIfChecked(item, event?): boolean {
    return this.selectedFilters.includes(item);
  }

  [![setFilter(filterValue, event?: Event): void {

    if (this.selectedFilters\[0\] === filterValue) {
      this.selectedFilters = \[\];
    } else {
      this.selectedFilters = \[filterValue\];
    }
    // }
    this.selected.emit(this.selectedFilters.map(filter => ({ disName: filter.toString(), value: filter })));
  }