Migrating to Signals in Angular: A Practical Workshop | Manfred Steyer | ng-conf 2024

Introduction

This tutorial will guide you through the process of migrating a classic Angular application to utilize the new Signals feature. By the end of this workshop, you will understand how Signals interact with Angular's Change Detection, Control-Flow, and how to integrate them with RxJS for advanced scenarios. This is crucial for modern Angular development as it enhances performance and responsiveness in applications.

Step 1: Understanding Signals

• What are Signals?
  • Signals are a new reactive primitive in Angular that help manage state and change detection more efficiently.
• Benefits of Using Signals
  • Improved performance due to more efficient change detection.
  • Simplified code structure by reducing the need for manual subscriptions.

Step 2: Setting Up Your Angular Application

• Create a New Angular Project
  • Use the Angular CLI to create a new project:

    ng new my-angular-app
    cd my-angular-app
    

• Install Necessary Dependencies
  • Ensure you have the latest Angular version that supports Signals:

    ng update @angular/core @angular/cli
    

Step 3: Implementing Signals in Your Application

• Creating a Signal
  • Define a signal using the createSignal function:

    import { createSignal } from '@angular/core';
    
    const mySignal = createSignal(0);
    

• Using Signals in Components
  • Use signals in your component for reactive data binding:

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-my-component',
      template: `<div>{{ mySignal() }}</div>`
    })
    export class MyComponent {
      mySignal = mySignal;
    }
    

Step 4: Exploring Change Detection

• Interaction with Change Detection
  • Understand how Signals reduce the need for Angular’s built-in change detection strategy.
  • This leads to less overhead and faster updates in the UI.

Step 5: Implementing Control-Flow with Signals

• Using Control-Flow Statements
  • Explore how to use signals to control rendering in templates:

    <ng-container *ngIf="mySignal() > 0">
      <p>Signal value is positive!</p>
    </ng-container>
    

Step 6: Working with Effects

• Creating Effects with Signals
  • Use the createEffect function to perform side effects based on signal changes:

    import { createEffect } from '@angular/core';
    
    const logEffect = createEffect(() => {
      return mySignal.subscribe(value => console.log(value));
    });
    

Step 7: Combining Signals with RxJS

• Advanced Use Cases
  • Learn how to combine Signals with Observables for complex scenarios:

    import { combineLatest } from 'rxjs';
    
    const combinedSignal = combineLatest([mySignal, someObservable]);
    

Step 8: Managing State with a Store

• Implementing a Simple Store with Signals
  • Create a simple state management solution using Signals:

    import { createStore } from '@angular/core';
    
    const store = createStore({
      state: { count: 0 },
      signal: mySignal
    });
    

Conclusion

Migrating to Signals in Angular offers significant benefits in performance and code clarity. By following these steps, you have learned how to set up Signals, utilize them in components, and combine them with RxJS for advanced use cases. As you continue to explore this feature, consider experimenting with different scenarios in your applications to fully leverage the power of Signals. For further learning, consider checking Angular's documentation and community resources.