Signals & Modern Control Flow (@if / @for)

A smarter kind of variable

A signal is a special box that holds a value and tells Angular whenever that value changes. When a signal changes, Angular updates only the parts of the screen that use it — no guessing, no extra work. Signals arrived in Angular 16 and are the default reactivity model from Angular 17 onward, so new projects use them everywhere.

You already know a plain property like count = 0. A signal is the same idea, but you create it with signal(...), read it by calling it like a function count(), and change it with set or update.

Create and read a signal

First make a counter signal. Notice you call it — count() with parentheses — to read the value.

// counter.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
  count = signal(0);            // a signal starting at 0
}

Change a signal with set and update

There are two ways to change a signal. Use set(...) to put a brand-new value in, or update(...) to change it based on the current value.

// in the class
increase() {
  this.count.update(n => n + 1);   // based on the old value
}
reset() {
  this.count.set(0);               // a brand-new value
}

computed(): values built from other signals

A computed signal is a value worked out from other signals. It recalculates by itself whenever any signal it depends on changes — you never update it by hand.

import { signal, computed } from '@angular/core';

price = signal(250);
quantity = signal(3);
total = computed(() => this.price() * this.quantity());

effect(): run code when a signal changes

A computed signal makes a new value. Sometimes instead you want to run an action whenever a signal changes — log it, save it to localStorage, or update something outside Angular. That is what an effect is for: a block of code that re-runs automatically every time any signal it reads changes. You set one up once, in the constructor.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-counter', standalone: true, template: '...' })
export class CounterComponent {
  count = signal(0);

  constructor() {
    effect(() => {
      // re-runs whenever count changes
      console.log('Count is now', this.count());
    });
  }
}

Signal inputs: a child @Input as a signal

You will meet @Input() for passing data from a parent into a child component. Modern Angular adds a signal input with input(): the value the parent passes arrives as a signal, so you read it with name() and it plugs straight into computed and effect.

import { Component, input, computed } from '@angular/core';

@Component({ selector: 'app-greeting', standalone: true,
  template: '<p>{{ shout() }}</p>' })
export class GreetingComponent {
  name = input('friend');                      // a signal input (default 'friend')
  shout = computed(() => this.name().toUpperCase() + '!');
}

The new control flow: @if and @for

Angular 17 also introduced a cleaner way to write conditions and loops directly in the template, called built-in control flow. It replaces *ngIf with @if and *ngFor with @for. The old directives still work, but new code uses these blocks — they are easier to read and faster.

<!-- @if replaces *ngIf -->
@if (count() > 0) {
  <p>You have {{ count() }} items.</p>
} @else {
  <p>Your cart is empty.</p>
}

<!-- @for replaces *ngFor (track is required) -->
<ul>
  @for (fruit of fruits; track fruit) {
    <li>{{ fruit }}</li>
  }
</ul>

@switch: pick one of several cases

When a value can be one of several options, a stack of @if blocks gets messy. @switch is the cleaner choice — it checks a value against each @case and shows the matching block, falling back to @default if none match. It is the template version of JavaScript’s switch statement.

@switch (status()) {
  @case ('loading') { <p>Loading…</p> }
  @case ('error')   { <p>Something went wrong.</p> }
  @default          { <p>All done!</p> }
}