Angular 22 — mi az újdonság, és mi marad a Signal-korszakból

// Angular 22 — generated by `ng new`
import { bootstrapApplication } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes),
    // ...
  ]
});

// What triggers CD now?
//  - Signal writes (computed graph invalidation)
//  - afterNextRender / afterRender
//  - Explicit ChangeDetectorRef.markForCheck() (rare)
//  - Template event bindings (auto-flushes)

import { form, field, validators } from '@angular/forms/signals';

interface BookingFormValue {
  name: string;
  email: string;
  nights: number;
}

@Component({
  template: `
    <form (submit)="submit()">
      <input [field]="f.name" />
      @if (f.name.invalid() && f.name.touched()) {
        <span class="err">{{ f.name.errors()[0]?.message }}</span>
      }

      <input [field]="f.email" />
      <input type="number" [field]="f.nights" />

      <button [disabled]="f.invalid() || f.pending()">
        {{ f.pending() ? 'Submitting...' : 'Submit' }}
      </button>
    </form>
  `
})
export class BookingFormComponent {
  readonly f = form<BookingFormValue>({
    name:  field('', validators.required),
    email: field('', validators.required, validators.email),
    nights: field(1, validators.min(1), validators.max(30))
  });

  readonly summary = computed(() =>
    `${this.f.name.value()} — ${this.f.nights.value()} nights`
  );

  submit() {
    if (this.f.invalid()) return;
    this.api.create(this.f.value());
  }
}

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

@Component({
  template: `
    @switch (projects.status()) {
      @case ('loading') { <p-skeleton /> }
      @case ('error')   { <div class="err">{{ projects.error() }}</div> }
      @case ('resolved') {
        @for (p of projects.value(); track p.id) {
          <app-project-card [project]="p" />
        }
      }
    }

    <select [(ngModel)]="filter">
      <option value="all">All</option>
      <option value="active">Active</option>
    </select>
  `
})
export class ProjectListComponent {
  readonly filter = signal<'all' | 'active'>('all');

  readonly projects = resource({
    request: () => ({ filter: this.filter() }),
    loader: async ({ request, abortSignal }) => {
      const res = await fetch(`/api/projects?f=${request.filter}`, {
        signal: abortSignal
      });
      if (!res.ok) throw new Error('Failed to load');
      return res.json();
    }
  });

  reload() {
    this.projects.reload();
  }
}

// angular.json — opt-in Rspack (experimental in v22)
"architect": {
  "build": {
    "builder": "@angular/build:application",
    "options": {
      "bundler": "rspack",        // <-- experimental
      "outputPath": "dist/app",
      "browser": "src/main.ts"
    }
  }
}

@Component({
  template: `
    <app-hero />
    <app-primary-nav />

    @defer (hydrate on viewport) {
      <app-comments-section />
    }

    @defer (hydrate on interaction) {
      <app-heavy-chart />
    }

    @defer (hydrate on idle) {
      <app-newsletter />
    }
  `
})
export class BlogPostPage {}