Angular Signals

This allows angular to have a reactive design rather than relying on zone.js for change detection. This can improve performance.

When it comes to signals, I normally use them in Components or Services.

signals can be assigned directly as a property in the class, no need for constructor.

Signal

import { signal } from "@angular/core"
 
// Create
const username = signal("abc")
 
// Set Value
username.set("xyz")
 
// Update Value
username.update((u) => u.toLowerCase())

Computed Signals (read only)

Computed is like a signal without the update and set methods.

import { signal, computed } from "@angular/core"
 
const firstName = signal("Morgan")
const firstNameCapitalized = computed(() => firstName().toUpperCase())

Signal - Effect

Effects are like a listener registration for signals (their value changing).

https://angular.dev/guide/signals#effects

effect(() => {
  console.log(`The current count is: ${count()}`)
})

Backlinks