I understand the basis of signals and what they are used for, and have adopted them myself. Just want to fully understand when to use them.
I am confused on when exactly to use signals, I have seen some rule of thumbs from other devs saying that whenever you are referencing a value in your .html template file, use a signal. However, should I use a signal even if that value will never change after the component has been created? e.g. a header title.
sKarma7 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Using signals for static values just to show in HTML is overkill.
I follow, that if you want your value updates to trigger something else, or be used to trigger some calculation/ new state, we can use a signal for that value, else a normal class property will suffice.
1
- Use signals for reactivity and dynamic updates.
- Avoid signals for static or unchanging data.
Static Value (No Signal Needed)
export class HeaderComponent {
readonly title = 'My Static Header'; // Static value
}
<h1>{{ title }}</h1>
Dynamic Value (Signal Recommended)
import { signal } from '@angular/core';
export class HeaderComponent {
headerTitle = signal('My Dynamic Header'); // Reactive signal
}
<h1>{{ headerTitle() }}</h1>
<button (click)="headerTitle.set('Updated Header')">Change Title</button>
1
I recommend using signals for any values that might change or are based on other reactive values. I think, you don’t need signals with static values and values that only change on component recreation.
When to Use Signals:
- When the Value Changes Over Time
- When You Need Reactive Updates in the Template(.html)
- When You Need to Share State Between Components
When Not to Use Signals:
- When the Value is Static and Never Changes
- When the Value is Computed Once and Doesn’t Need Reactive Updates
Conclusion:
Use signals for reactive state: If the value changes and you want Angular to react to those changes (e.g., update the UI).
Don’t overuse signals for static values: If the value is constant or doesn’t need reactive updates, stick to regular variables or properties.