Angular Signals with Objects and Arrays - Avoid mutating signal values directly

Using Signals with Objects

1. Initialize the Signal:

   typescrip
   import { signal } from '@angular/core';
   
   const userSignal = signal<{ name: string; age: number }>({ name: 'John', age: 30 });
   

2. Updating the Signal:

   Instead of mutating the existing object, create a new one:

   typescript
   function updateUser(newName: string, newAge: number) {
       userSignal.set({ ...userSignal.get(), name: newName, age: newAge });
   }
   

Using Signals with Arrays

1. Initialize the Signal:

   typescrip
   const itemsSignal = signal<string[]>(['Item 1', 'Item 2']);
   

2. Updating the Array:

   Use methods like concat, filter, or map to create a new array instance:

   typescri
   function addItem(newItem: string) {
       itemsSignal.set([...itemsSignal.get(), newItem]);
   }
   
   function removeItem(itemToRemove: string) {
       itemsSignal.set(itemsSignal.get().filter(item => item !== itemToRemove));
   }
   

Key Points

• Immutability: Always return new instances of objects or arrays instead of modifying existing ones.
• Performance: This approach can help with change detection and performance, as Angular can efficiently track changes when references change.
• Readability: This method maintains clarity in your code, making it easier to understand how state changes occur.

By following these principles, you can effectively manage state in Angular applications using Signals while maintaining best practices for immutability.