@angular-architects/signals-experimental

🌐 Hosted Demo
🎞️ Video: Zone-based vs. Signal-based Change Detection
❓ Questions: Feel free to use the Q&A section

This is library allows to configure an experimental Angular Change Detection strategy based on Signals.

⚠️ It uses a slightly modified version of the @angular/core package and is therefore not meant to be used in apps rolled-out for production usage.

• @angular-architects/signals-experimental
  • Supported Features
  • Getting Started
  • Roadmap

Supported Features

• Angular Default Change Detection
• Signal-based Change Detection w/o Zone.js
  • Triggers if Template (ReactiveLViewConsumer) is notified by it's Signal Producers and the Value-Version changed.
  • Schedules Effects based on the AnimationFrame.
  • Triggers Change Detection after Routing Events.

Getting Started

1. Currently, Angular Version 16.1.7 is supported.

2. Install package:

   npm install @angular-architects/signals-experimental@ng.16.1.7

3. Install patched @angular/core package:

   npm install @angular/core@file:./node_modules/@angular-architects/signals-experimental/.bin/angular-core-patch-16.1.7.tgz

4. Add a provider to the bootstrap config (main.ts or app.config.ts):

   +import {
   +  CustomChangeDetectionMode,
   +  provideChangeDetectionStrategy
   +} from '@angular-architects/signals-experimental';
   
    export const appConfig = {
      providers: [
   +    provideChangeDetectionStrategy(
   +      CustomChangeDetectionMode.Signals
   +    )
        // All other providers
      ]
    };

5. Each Component where the Change Detection shall be triggered through Signals needs to use a Host Directive:

   +import {
   +  SignalComponentFeature
   +} from '@angular-architects/signals-experimental';
    import {
      NgFor, NgIf
    } from '@angular/common';
    import { 
      Component, computed, effect, signal
    } from '@angular/core';
   
    @Component({
      selector: 'app-search',
      standalone: true,
      imports: [
        NgIf, NgFor
      ],
   +  hostDirectives: [
   +    SignalComponentFeature
   +  ],
      templateUrl: './search.component.html'
    })
    export class SearchComponent {
      name = signal('Jane');
    }

6. That's all - try out this experimental mode and tell us how it works for you. Although the upcoming Angular implementation of Signal Components (could be published with Angular v18) likely will vary, any experiment with your codebase may be helpful to provide useful feedback to the Angular team to improve the final API.

Roadmap

• Support for further Angular releases.
• Support a hybrid mode with Zone-based and Signal-based Change Detection w/i one app.
• Schematics to improve the patch version setup.