Signal computed not refreshed

[Rebolon]

Which @angular/* package(s) are the source of the bug?

common, core

Is this a regression?

No

Description

The new Signal Api has a computed function that expect to be reactive, based on encapsulated Signals.
I have some use case here it's not refreshed. I expected toSignal to be the root of the problem, but it appears that it also failed with simple signal value.

  usersSignalStore: WritableSignal<string[]> = signal(['first']);
  usersCountCompute = computed(() => {
    const users = this.usersSignalStore();
    return users.length;
  });

usersSignal is note recomputed when usersSignalStore is modified.

In a template, i can do {{usersSignalStore().length}} and it will work. But using {{ usersCountCompute() }} will display 1 at first time, but will never be refreshed.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-fdzu8r

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

"dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/router": "^17.2.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.5.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.2.0",
    "@angular/cli": "^17.2.0",
    "@angular/compiler-cli": "^17.2.0",
    "typescript": "~5.3.0"
  },

Anything else?

No response

[JeanMeche]

Hi, this behavior is expected.
You're mutating your array in your add method with usersSignal.push('simple signal');.
Signals check the reference by default (if you don't provide a compare function).

[Rebolon]

For information for readers : the solution is to use update like this

// creation of 2 signals
  usersSignalStore: WritableSignal<string[]> = signal(['first']);
  usersCountCompute = computed(() => {
    const users = this.usersSignalStore();
    return users.length;
  });
...

...
// update of the array
  this.usersSignalStore.update((items) => [...items, 'simple signal']);

But this solution is not working for Signals created with toSignal on Observable. No solution for instance.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}