Search code examples
angularangular-signals

Signal update don't call effect


Announcements value in below code changes successfully. effect executes once, but not when changeDates executes.

@Injectable({
  providedIn: 'platform',
})
export class AnnouncementsService {
  announcements: WritableSignal<Announcements>;
  constructor(private logger: NGXLogger) {
    this.announcements = signal({
      start: new Date('2023-08-27'),
      end: new Date('2023-09-03'),
      content: `some content`,
    });
    effect(() => {this.logger.debug('test data')})
  }

  changeDates(howMuch: number) {
    this.announcements.update((announcements: Announcements) => {
      announcements.start.setDate(announcements.start.getDate() + howMuch);
      announcements.end.setDate(announcements.end.getDate() + howMuch);
      return announcements;
    });
  }

  goForward() {
    this.changeDates(7);
  }
  goBackwards() {
    this.changeDates(-7);
  }
}

Is it bug? What am I doing wrong?


Solution

  • As mentioned in the angular doc:

    Effects always run at least once. When an effect runs, it tracks any signal value reads. Whenever any of these signal values change, the effect runs again.

    You need to read signal inside effects so that effects runs whenever signal value changes

    effect(() => {this.logger.debug(`test data ${this.announcements()}`)})