79358531

Date: 2025-01-15 14:17:44
Score: 0.5
Natty:
Report link

I thought my problem was the referential equality since my signal is an object (as suggest by @JSON Derulo) , unfortunately I have implemented a custom equality function in the signal

filtersProd = signal(
    {source: '1', feedback: 'all'},
    {equal: (a, b) => {
        return a.feedback === b.feedback && a.source === b.source;
      }
    }
  );

but it still doesn't work.

I solved the issue separating the input value and the output event on the toggle button and updating the values of the object with the update method of the signal within the output handler.

FilterSourceFeedback html

<mat-button-toggle-group (valueChange)="feedbackHandler($event)" [value]="filters().feedback" hideSingleSelectionIndicator="true" name="feedback" aria-label="feedback rating">
    <mat-button-toggle value="all">all</mat-button-toggle>
    <mat-button-toggle value="4+">4+</mat-button-toggle>
    <mat-button-toggle value="3">3</mat-button-toggle>
    <mat-button-toggle value="1/2">1/2</mat-button-toggle>
</mat-button-toggle-group>

FilterSourceFeedback component

feedbackHandler(e: string) {
    const newFilters = {source: this.filters().source, feedback: e};
    this.filters.update(() => newFilters);
}

In this way the computed signal is updated every new selection of the feedback and consequently the result array.

Reasons:
  • Whitelisted phrase (-2): I solved
  • RegEx Blacklisted phrase (2): it still doesn't work
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @JSON
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: berno