Angular 22 cheatsheet
Angular 22: Signals and services
8 common Angular 22 tasks.
Create a signal
Hold a value that notifies readers when it changes.
count = signal(0);
increment() {
this.count.update((n) => n + 1);
}
Derive a value
Compute a value from other signals. It updates automatically.
double = computed(() => this.count() * 2);
Run code when signals change
Run a side effect whenever the signals it reads change.
effect(() => {
console.log('Count is', this.count());
});
Create a service
Make a class injectable in the root injector, so one instance is shared.
@Injectable({ providedIn: 'root' })
export class AuthService {
user = signal<User | null>(null);
}
Fetch data over HTTP
Request JSON with HttpClient, which returns an observable. Provide it with provideHttpClient().
private http = inject(HttpClient);
getUsers() {
return this.http.get<User[]>('/api/users');
}
Show an observable in a template
Subscribe and unsubscribe automatically.
@if (users$ | async; as users) {
<p>{{ users.length }} users</p>
}
Load data with a resource
Load async data into signals that track loading and error state.
users = httpResource<User[]>(() => '/api/users');