How to break object reference when updating a signal's nested properties in Angular?

I have a Customer object wrapped inside a signal in Angular like this:

mCustomer: Signal<Customer> = signal(new Customer(id: 1, ...));

This signal is provided through a service which uses ngRx Signal State. and this service is injected into both Component 1 and Component 2.

In Component 1, I update the name property of the mCustomer signal directly like this (without using .set() or .update() on the signal):

mCustomer().name = "Abc";

This change is reflected in Component 2's mCustomer() signal variable. This behavior is due to object references in JavaScript. However, I want to break the object reference and follow Angular’s signal mechanism, ensuring that changes propagate only when I explicitly use .set() or .update().

My question:

• 
  How can I break the reference so that the signal updates immutably, and changes are only reflected when .set() or .update() is called?
  
  
• 
  What’s the best practice in Angular Signals for handling nested objects or properties to prevent direct mutation while maintaining immutability?
  

I’m looking for a way to enforce immutability and follow the signal update mechanism properly. Any suggestions or patterns to achieve this?

Continue reading...