Signal Outputs, linkedSignal & Resources in Angular

import { output, linkedSignal, resource } from '@angular/core';

// === Signal-based output (17.3+) ===
@Component({ /* ... */ })
export class ToggleComponent {
  // Replaces @Output() EventEmitter
  toggled = output<boolean>();

  handleClick() {
    this.toggled.emit(true);
  }
}

// === linkedSignal (19+) ===
// A writable derived signal — auto-syncs with source but can be overridden
@Component({ /* ... */ })
export class ShippingForm {
  country = signal('US');
  // Resets when country changes, but user can override
  state = linkedSignal(() => this.defaultStateFor(this.country()));
}

// === resource() (19+) — async signal ===
@Component({ /* ... */ })
export class UserDetail {
  userId = signal(1);

  user = resource({
    params: () => ({ id: this.userId() }),
    loader: async ({ params }) => {
      const res = await fetch(\`/api/users/\${params.id}\`);
      return res.json();
    },
  });
}

// In template:
// @if (user.isLoading()) { <p>Loading...</p> }
// @if (user.error()) { <p>Error: {{ user.error() }}</p> }
// @if (user.value(); as u) { <p>{{ u.name }}</p> }