Send a signal with the same value

Question

I have a situation when I need to inform subscribers about a signal's being changed with the same value it currently has. I am using the following example: StackBlitz

Then I change line 58:

this.count.update((c) => c + 1);

to:

this.count.update((c) => c + 0);

and nothing is logged into the Console.

Can a signal emit events with duplicate values?

Answer 1

I am not sure why you have a separate folder for signals, but since it mentions Angular17, the signal function has a second argument (CreateSignalOptions), which is an object with property equals, this defines when the signal event is considered a change.

Usually, for primitive types (as in your case number) the actual value has to change for the signal to trigger a change, but you have this property equals, which can be used to manipulate this logic, to fire even when there is no actual change.

...
export class App {
  count = signal<number>(0, {
    equal: (a: number, b: number) => false,
  });
  ...

Full Code:

import { Component, signal, computed, effect } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { TestArraysCmp } from './testing-arrays.component';
import { TestObjectsCmp } from './testing-objects.component';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div>Count: {{ count() }}</div>
    <div>Double: {{ double() }}</div>

    <button (click)="inc()">Increase</button>
    <button (click)="reset()">Reset</button>

    <br>
    <!-- <test-arrays /> -->
    <!-- <test-objects /> -->

  `,
  imports: [TestArraysCmp, TestObjectsCmp],
})
export class App {
  count = signal<number>(0, {
    equal: (a: number, b: number) => false,
  });

  double = computed(() => this.count() * 2);

  countType = computed(() => (this.count() % 2 === 0 ? 'even' : 'odd'));

  constructor() {
    effect(() => {
      console.log('Count changed', this.count());
      console.log(this.count(), 'is', this.countType());
    });
  }

  inc() {
    this.count.update((c) => c + 0);
  }

  reset() {
    this.count.set(0);
  }
}

bootstrapApplication(App);

Stackblitz Demo