Angular Signals : A Practical Guide with Examples

Angular 17 recently introduced the concept of Signals to improve reactivity and simplify state management. Signals allow Angular applications to handle state changes in a more predictable, efficient, and declarative way. This blog will cover what Signals are, why they matter, and how to use them with practical examples.

What are Signals?

In Angular, a Signal is a reactive primitive that provides a new approach to managing and responding to state changes. With Signals, you can track changes to specific data points (variables or objects), allowing the app to automatically react when the data changes without needing complex change detection.

Why Use Signals?

Signals offer several benefits:

• Predictable reactivity: Signals enable precise control over when a component updates, leading to more predictable behavior.
• Improved performance: With Signals, Angular avoids unnecessary re-renders by updating only the affected parts.
• Simplified state management: Signals are easy to understand and integrate with Angular’s Dependency Injection, making state management simpler and more scalable.

Creating and Using Signals in Angular

Angular Signals can be defined using the signal function in Angular 16 and above. Let’s walk through an example where we’ll create a simple counter component using Signals.

1. Setting Up the Counter Component

First, create a new Angular component:

ng generate component Counter

2. Import Signals into the Component

Import signal, computed, and effect from @angular/core. These functions allow us to create reactive data and computed states in Angular.

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

3. Define the Counter Component with Signals

In your component file (counter.component.ts), create a signal for the counter state and add methods to increment and decrement its value.

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent {
  // Define a signal for the counter
  counter = signal(0);

  // Create a computed signal to double the counter value
  doubledCounter = computed(() => this.counter() * 2);

  // Define methods to increment and decrement the counter
  increment() {
    this.counter.update(value => value + 1);
  }

  decrement() {
    this.counter.update(value => value - 1);
  }

  // Set up an effect to log counter changes
  constructor() {
    effect(() => {
      console.log("Counter value changed:", this.counter());
    });
  }
}

• signal(0): Initializes the counter with a value of 0.
• computed(() => this.counter() * 2): Creates a computed signal that automatically updates when the counter changes.
• effect: Logs counter updates to the console whenever the counter’s value changes.

4. Updating the Component Template

Open the counter.component.html file and add buttons to control the counter. Display both the counter value and the computed doubled counter value.

<div>
  <h1>Angular Signals Counter</h1>
  <p>Counter: {{ counter() }}</p>
  <p>Doubled Counter: {{ doubledCounter() }}</p>

  <button (click)="increment()">Increment</button>
  <button (click)="decrement()">Decrement</button>
</div>

• {{ counter() }}: This syntax retrieves the current value of the counter signal.
• {{ doubledCounter() }}: Shows the computed value of counter * 2.

5. Testing the Component

Run your Angular application using:

ng serve

Open your browser, and navigate to http://localhost:4200. You should see the counter with its initial value, along with buttons to increment and decrement. Every time you click the buttons, the component updates in real time, and the effect logs the change in the console.

Advanced Example: Using Signals for Form Validation

Let’s extend this concept to form validation. In this example, we’ll create a form with a text field and use a computed signal to enable or disable the submit button based on validation.

1. Create the Form Component

ng generate component Form

2. Define Signals for Form State

Inside the form.component.ts, create signals to hold the input value and a computed signal for validation.

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  // Signal to hold form input
  inputText = signal('');

  // Computed signal to check if input is valid
  isInputValid = computed(() => this.inputText().length >= 3);

  // Update the input text
  updateInputText(value: string) {
    this.inputText.set(value);
  }
}

3. Update the Template with Form Controls

In form.component.html, add a text input and a submit button that is enabled only when the input is valid.

<div>
  <h1>Form with Angular Signals</h1>
  <input
    type="text"
    placeholder="Enter at least 3 characters"
    [value]="inputText()"
    (input)="updateInputText($event.target.value)"
  />

  <button [disabled]="!isInputValid()">Submit</button>
  <p *ngIf="!isInputValid()">Input must be at least 3 characters.</p>
</div>

• [disabled]="!isInputValid()": Disables the submit button unless isInputValid is true.

4. Testing the Form Component

With this setup, the submit button will enable only when the input text has at least three characters. This demonstrates how Signals can help manage form validation logic simply and effectively.

Conclusion

Using Signals in Angular can make your code more reactive, efficient, and easier to manage. They work well for basic state management and can be scaled up for more complex applications. By using Signals, computed values, and effects, Angular apps become more predictable and performant.

Find out more: Angular Signals

Happy learning!! 😊