Angular Signals Examples
A runnable gallery of everyday Angular signals patterns — counter, toggle, computed total, bound input, list render, effect, update and set — each a short editable standalone-component demo.
Examples · Updated
Overview
A gallery of runnable Angular signals patterns — edit any one live in the editor. New to signals? Start with Angular signals — the basics.
Examples
Counter with a signal
Toggle a boolean signal
Computed derived total
Input bound to a signal
List rendered from a signal
Effect reacting to a signal
Update an array immutably
Set a value from an event
Frequently asked questions
How do I build a counter with Angular signals?
Create
count = signal(0) and update it on click with count.set(count() + 1) or count.update((n) => n + 1). Read it in the template as {{ count() }}. See the counter demo above and the signal() reference.How do I derive a value from a signal?
Use
computed(): total = computed(() => price() * qty()). It is read-only and recomputes whenever a source signal changes. The computed() reference covers laziness and memoization.How do I bind an input to a signal?
Read it with
[value]="text()" and write it with (input)="text.set($event.target.value)". The full walk-through is how to set up two-way binding.