Signals and reference types

💻 Tech

Be careful using objects in initializing a signal and later on use that objects. The object and the value in the signal refer to the same object. In the example below, you can see that initialState was modified even though it was only used to set the initial value of a signal. Under the hood, Angular updates the signal and the object that it references to, which is initialState.

interface type1 {
	name: string;
}

export class TestComponent {
	initialState: type1 = { name: "francois" };
	testSignal = signal(this.initialState);

	ngOnInit() {
		console.log(this.initialState); // francois
		this.testSignal().name = "julia";
		console.log(this.initialState); // julia
	}
}