Checkbox state based on function Angular

Question

In my component, I have two arrays of items: allItems and selectedItems (using dummy names here, of course). The selection is handled by checkbox controls and their state depends on whether an item is found in selectedItems.

Since I need to evaluate checkbox state based on an expression, I need to call a function, like so:

<div *ngFor="let item of allItems; let i = index">
    <input type="checkbox"
                [checked]="itemChecked(item .Id)"
                (change)="toggleItem(i)">
    <label class="form-check-label" [for]="item.Id">{{ item.Value }}</label>
</div>

And the function goes something like:

itemChecked(id: number) {
    return this.selectedItems.findIndex(x => x.Id == id) > -1;
}

The problem is the itemChecked executes nonstop. I've read before this can maybe be solved using directives, but if that is even the case, I can't find any concrete example.

Any help would be appreciated.

Harun Yilmaz · Accepted Answer · 2020-04-02 09:15:24Z

1

You can create a custom pipe in order to check for changes.

The custom pipe

@Pipe({
  name: 'isItemChecked'
})
export class IsItemCheckedPipe implements PipeTransform {

  transform(selectedItems: any[], id: number) {
    return selectedItems.findIndex(x => x.Id === id) > -1;
    // Or
    // return selectedItems.some(x => x.Id === id);
  }

}

And in the template:

<input type="checkbox"
                [checked]="selectedItems | isItemChecked:item.Id"
                (change)="toggleItem(i)">

answered Apr 2, 2020 at 9:15

Harun Yilmaz

8,5793 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Checkbox state based on function Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related