The Angular 17 Signal effect() API With example

In Angular 17, the Signal API introduces a reactive way to manage state using signals, which can be very useful for performance and simplicity in component state management. The effect()

Overview of effect()

The effect() function registers a piece of code that will react to changes in signals. When any of the signals used within the effect() are updated, the effect re-runs.

Example

Here's a simple example of using the Signal API with the effect() function in an Angular component.

Step 1: Set Up Your Angular Component

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

@Component({
  selector: 'app-signal-example',
  template: `
    <div>
      <h1>Signal Example</h1>
      <input [(ngModel)]="name" placeholder="Enter your name" />
      <p>Hello, {{ greeting() }}</p>
      <button (click)="updateName()">Update Greeting</button>
    </div>
  `,
})
export class SignalExampleComponent {
  // Define a signal for the name
  name = signal('World');

  // Create a derived signal for greeting
  greeting = () => `${this.name()}`;

  constructor() {
    // Create an effect that runs when the name changes
    effect(() => {
      console.log(`Greeting updated: ${this.greeting()}`);
    });
  }

  updateName() {
    this.name.set('Angular User');
  }
}

Explanation

1. Signal Definition: The name signal is initialized with the default value "World".
2. Derived Signal: The greeting function uses the name signal to generate a greeting string.
3. Effect Creation: The effect() function logs the updated greeting whenever the name signal changes.
4. Updating State: The updateName() method changes the value of the name signal to "Angular User", which triggers the effect.

Summary

The effect() function provides a powerful way to create reactive updates in Angular 17 using the Signal API, allowing for cleaner and more efficient state management. By utilizing signals and effects, you can enhance the reactivity of your Angular applications.