Properties inside an Signal<Object> get updated by Reference Issue. [NgRx Signal State]

I've used ngRx signal state package and created a service for the state. The service is injected in component 1 & 2. I've tried to change the value of the signal from component 1 without using .set() or .update() methods from angular signals. But Still the value of the signal is updated properly in component 2 by reference.

Service:

@Injectable()
export class PropertyDataService {
readonly #state: SignalState<PropertyDataRxState> = signalState<PropertyDataRxState>(this.initPropertyDataRxState());
readonly customer: DeepSignal<Customer> = this.#state.customer;
}


Component 1: (not using any signal methods to update)

mCustomer = this.mPropertyDataRxService.state.customer;

onClick() {
this.mCustomer().nestedObject.balance += 5;.
}


Component 2: (still latest value getting updated by reference).

My question is that if it's getting updated by Reference, It's not following the angular signal mechanism to trigger changeDetection. How to break reference & follow signal mechanism?


mCustomer = this.mPropertyDataRxService.state.customer;

// Template
<div>{{mCustomer().nestedObject?.balance}}</div>

Continue reading...