When should I use signals?

I am using signals in Angular 18 for small local states. But I don't understand why and when I should use them instead of a normal class member. Let's take a simple toggle:

Example 1

@Component({...})
export class ToggleComponent {
toggleState: boolean = false;

toggle() {
this.toggleState = !this.toggleState;
}
}


Example 2

@Component({...})
export class ToggleComponent {
toggleState = signal(false);

toggle() {
this.toggleState.set(!this.toggleState());
}
}


For this example: is there a real difference between those 2 approaches? Why should I use one and not the other? Given for example a parent and a child, and this child has a button which has the job to change the parent state, would be useful to use signal or whatelse?

Continue reading...