javascript / expert
Snippet
Advanced Signal Predicates in Block-Based Control Flow
The new Angular block-based control flow (@if) works seamlessly with Signal predicates. Using a computed() signal for the condition ensures that the DOM structure only updates when the combined logic of multiple source signals actually changes its boolean result.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
@if (isActionable()) {<button (click)="execute()">Submit</button>} @else {<p>Action locked.</p>}// Logicconst isActionable = computed(() =>status() === 'ready' && permissions().includes('write'));
angular
Breakdown
1
@if (isActionable()) {
Uses the signal value directly as a reactive condition in the template.
2
status() === 'ready' && permissions().includes('write')
Combines multiple reactive dependencies into a single derived state.