How to automatically compute a signal with withComputed in ngrx/signals Library with...

I have recently started using the ngrx/signals library in my Angular project, and I am trying to automatically compute a state called countSelectedRows using the withComputed function. However, I am encountering an issue where the state does not recognize the changes in my SelectionModel.

Here is a simplified version of my code:

export const StackOverflowStore = signalStore(
{ providedIn: 'root' },
withState({
tableRows: [],
selection: new SelectionModel(true, []),
}),

withComputed(({ tableRows, selection }) => ({
countSelectedRows: computed(() => {
return tableRows().filter(row => selection().isSelected(row)).length;
})
})),
);

@Component({
selector: 'app-example',
template: `
<div *ngFor="let row of store.tableRows()">
<input type="checkbox" (change)="toggleSelection(row)" />
{{ row.name }}
</div>
<p>Selected Rows Count: {{ store.countSelectedRows() }}</p>
`
})
export class ExampleComponent {
store = inject(StackOverflowStore);

toggleSelection(row: any) {
this.store.selection().toggle(row);
}
}


The withComputed function does not seem to detect changes in the SelectionModel. Is it possible to implement this using ngrx/signals or do I need to find another way to detect changes in selection.changed?

Any help or suggestions would be greatly appreciated!

Continue reading...