Push in Angular Signals Array – Angular

The Problem:

Given an Angular application, how can you add an item to a Signal array in a concise and efficient manner, while avoiding the need to refer to the list multiple times in the code?

The Solutions:

Solution 1: Using mutate()

To push an item into a Signal array, you can use the mutate() method. This method takes a callback function as an argument, which is passed the current value of the array. You can use this function to modify the array, for example, by pushing a new item onto it.

messages = signal<Message[]>([]);

ngOnInit(): void {
   const newMessage = ...
   this.messages.mutate(values =&gt; values.push(newMessage));
}

In this code, the messages signal is initialized to an empty array. The ngOnInit() method pushes a new message onto the array using the mutate() method.

Solution 2: Update method to push an item into a Signal array

The update() method was introduced in Angular 17 as a replacement for the removed mutate() method. It allows for modifications to the Signal’s value while maintaining reference equality.

To push an item into a Signal array, use the following steps:

1. Create a Signal of the desired type, e.g., signal<string[]>().
2. Define a computed() property to display the array’s values.
3. Use the update() method to modify the array. For example:

const arraySignal = signal<string[]>([]);

const updateArray = () => {
  arraySignal.update((arr) => {
    arr.push("New Item");
    return arr;
  });
};

Solution 3: Update the Signal with New Array

To push an item into a Signal array, you can use the .update() method. This method takes a callback function as its argument, which receives the current value of the Signal. Within the callback, you can mutate the value directly, such as by pushing a new item to an array. Here’s an example:

messages = signal<Message[]>([]);

ngOnInit(): void {
   const newMessage = ...
   this.messages.update(values => [...values, newMessage]);
}

In this example, the update method is used to push a new newMessage to the messages Signal. The callback function takes the current value of the Signal (values) as input and returns a new array that includes both the original values and the new message. This new array is then updated as the new value of the Signal.

Video Explanation: