The Complete Production SOP: How to Deploy and Run Angular 18 Signals & Zoneless Change Detection in Autonomous AI Agents

---
name: "angular-18-signals-reactivity"
description: "Build modern Angular 18 applications using native Signals and Zoneless change detection."
triggers:
  - "use angular 18 signals"
  - "angular zoneless change detection"
  - "signal input output angular"
permissions:
  fs_read: true
  fs_write: "workspace"
---

import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes)
  ]
};

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <div>
      <h3>{{ title() }}</h3>
      <p>Count: {{ count() }} | Doubled: {{ doubled() }}</p>
      <button (click)="increment()">+1</button>
      <button (click)="reset()">Reset</button>
    </div>
  `
})
export class CounterComponent {
  readonly title = input.required<string>();
  readonly step = input<number>(1);
  readonly count = model<number>(0);
  readonly thresholdReached = output<number>();

  readonly doubled = computed(() => this.count() * 2);

  constructor() {
    effect(() => {
      if (this.count() >= 100) {
        this.thresholdReached.emit(this.count());
      }
    });
  }

  increment(): void {
    this.count.update(c => c + this.step());
  }

  reset(): void {
    this.count.set(0);
  }
}

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CounterComponent],
      providers: [provideExperimentalZonelessChangeDetection()]
    }).compileComponents();

    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.componentRef.setInput('title', 'Metric Tracker');
    await fixture.whenStable();
  });

  it('should reactively update doubled signal on count mutation', async () => {
    component.count.set(5);
    await fixture.whenStable();
    expect(component.doubled()).toBe(10);
  });
});