Angular Signals and methods in templates

Question

It is good practice to use signals in templates and bad practice to use methods.

But signals and methods?

Example (using the get method from Map):

userStatuses: WritableSignal<Map<string, string>> = signal(new Map([ 
['Alice', 'offline'], 
['Bob', 'online'] 
]));
<div *ngIf="userStatuses().get('Alice') === 'offline'" class="offline-message"> 
⚠️ **ALERT:** Alice is currently offline!
</div>

It's better to use a computed signal like:

isAliceOffline = computed(() => { 
const status = this.userStatuses().get('Alice'); 
return status === 'offline'; 
});
<div *ngIf="isAliceOffline()" class="offline-message">
⚠️ **ALERT:** Alice is currently offline!

Which approach performs best and why?

Answer 1 · 2025-11-06 19:32:01Z

Whether it is a function that uses a signal or a computed method or you write the logic directly on the HTML using the signal: When the signal value changes, the related conditions are re-evaluated.

Behavior wise all three do the same thing.

The main difference is logic written in the DOM cannot be unit tested, while methods/derived state can be unit tested, as per my understanding.

Answer 2 · 2025-11-08 12:50:05Z

Joel Garcia Nuño

• Nov 8 at 12:50

Is strange using signals with *ngIf directive, use control flow syntax @if; Also for clarity in your template you can use @let personIsOffline = isAliceOffline().

Is better approach the computed to evaluate the status ***** === 'offline'.

Take considerations, the computed will be executed once.

Answer 3 · 2025-11-09 15:24:35Z

of course signal approach is better, the main reason is the performance, just add console log into method and signal and compare the repetition of that, you will notice that method is running multiple times unnecessary, while the computed signal is aware of dependencies and only run again when one of the dependencies is changed.

Collectives™ on Stack Overflow

Angular Signals and methods in templates

3 Replies 3