Why is my Angular signal effect not firing?

The class below declares a signal and an update function for the signal:

export class ProductSidebarService {
public productSidebarSignal = signal<{
productSidebarData: ProductSidebarData;
}>({ productSidebarData: new ProductSidebarData() });

public updateSidebarData = (productSidebarData: ProductSidebarData) => {
this.productSidebarSignal.set({productSidebarData:{... productSidebarData} });
console.dir('ProductSidebarService.productSidebarSignal', this.productSidebarSignal())
};
}


The class below declares an effect that is supposed to fire when the above signal is updated but the effect never fires:

export class ProductGalleryComponent {
private productSidebarService = inject(ProductSidebarService);
public productSidebarData = this.productSidebarService.productSidebarSignal();

private productSidebarEffect = effect(() => {
console.dir('ProductGalleryComponent.productSidebarSignal', this.productSidebarService.productSidebarSignal())


});
}

Continue reading...