Push in Angular Signals Array

Issue

Context:

With Angular 16, we can now use Signals.

But it doesn't seem clear to me how to do a simple push into an array.

The documentation suggests from Angular Signal official doc:

When working with signals that contain objects, it's sometimes useful to mutate that object directly. For example, if the object is an array, you may want to push a new value without replacing the array entirely. To make an internal change like this, use the .mutate method

So it would be for example:

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

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

But it seems pretty weird to refer 2 times to the list. The first time with this.messages and the second one with values.

Question:

How can I push an item into a Signal array?

Solution

Your code is absolutely correct:

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

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

To sum up the types we are working with here:

• message: Signal<Message[]>
• values: Message[]

When you call mutate() you're invoking the method on a Signal. The signal here is the reactive primitive not the value itself.

You call that value with : messages(). This is signals 101.

Cf the definition of signals by Angular:

const SIGNAL = Symbol('SIGNAL');

export type Signal<T> = (() => T)&{
  [SIGNAL]: unknown;
};

So when you call mutate, you're actually telling the Signal to update its value. Signal.set() just accepts a value to set so you're changing the reference, while Signal.mutate() takes a callback to mutate the value and keep the reference.

---

Edit: mutate has been droped in v17. If you want to update a Signal in 17 you'll have to use set() or update(). Update has a callback with the current value and should return the new value !

Answered By - Matthieu Riegler