Angular v21 introduces Signals, a lightweight reactive primitive for state management. Signals allow you to update the UI efficiently without relying heavily on RxJS.

#Creating Signals

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

const count = signal(0);

#Updating Signals

count.set(count() + 1);

#Using Signals in Templates

@Component({
  selector: 'app-counter',
  template: `<button (click)="increment()">Count: {{ count() }}</button>`,
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

#Signals with Computed Values

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

const doubleCount = computed(() => count() \* 2);

#Signals + RxJS Interop

import { toSignal } from '@angular/core/rxjs-interop';
import { timer } from 'rxjs';

const timeSignal = toSignal(timer(0, 1000));

#Best Practices

• Use signals for local component state
• Combine with RxJS for global or asynchronous state
• Prefer computed for derived values instead of recalculating manually

#Conclusion

Signals in Angular v21 provide fast, reactive, and fine-grained state management that reduces boilerplate and improves performance.