1 - Angular Signals: da Zero a Produzione

import { signal } from '@angular/core';

// Creazione di un WritableSignal con valore iniziale
const count = signal(0);           // WritableSignal<number>
const name = signal('Angular');    // WritableSignal<string>
const items = signal<string[]>([]); // Tipo esplicito con generics

// LEGGERE il valore: chiama il signal come funzione
console.log(count());    // 0
console.log(name());     // 'Angular'
console.log(items());    // []

// SCRIVERE un nuovo valore: usa .set()
count.set(5);
console.log(count());    // 5

// AGGIORNARE basandosi sul valore corrente: usa .update()
count.update(current => current + 1);
console.log(count());    // 6

// AGGIORNARE oggetti/array: usa .update() per immutabilita
items.update(list => [...list, 'Nuovo elemento']);
console.log(items());    // ['Nuovo elemento']
    

import { signal, Signal, WritableSignal } from '@angular/core';

// Signal privato e scrivibile nel servizio
private _counter: WritableSignal<number> = signal(0);

// Esponi solo la versione read-only ai consumatori
readonly counter: Signal<number> = this._counter.asReadonly();

// Metodo pubblico controllato per modificare lo stato
increment(): void {
  this._counter.update(v => v + 1);
}

// I consumatori possono leggere ma NON scrivere
// this.counterService.counter()    // OK - lettura
// this.counterService.counter.set(5)  // ERRORE - non esiste .set()
    

// Signal con confronto personalizzato
const user = signal(
  { name: 'Federico', age: 30 },
  {
    equal: (a, b) => a.name === b.name && a.age === b.age
  }
);

// Questo NON notifica i consumatori (stesso contenuto)
user.set({ name: 'Federico', age: 30 });

// Questo notifica i consumatori (contenuto diverso)
user.set({ name: 'Federico', age: 31 });
    

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

const firstName = signal('Federico');
const lastName = signal('Calo');
const age = signal(30);

// Computed: ricalcolato SOLO quando firstName o lastName cambiano
const fullName = computed(() => `${firstName()} ${lastName()}`);
console.log(fullName());  // 'Federico Calo'

// Computed con logica condizionale
const canVote = computed(() => age() >= 18);
console.log(canVote());   // true

// Computed che dipende da altri computed (catena)
const greeting = computed(() =>
  `Ciao ${fullName()}, ${canVote() ? 'puoi votare' : 'non puoi votare'}`
);
console.log(greeting());  // 'Ciao Federico Calo, puoi votare'

// Quando cambia firstName, fullName e greeting si aggiornano
// ma canVote NO (non dipende da firstName)
firstName.set('Marco');
console.log(fullName());  // 'Marco Calo'
console.log(greeting());  // 'Ciao Marco Calo, puoi votare'
    

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

@Component({
  selector: 'app-logger',
  standalone: true,
  template: `<button (click)="increment()">Count: {{ count() }}</button>`
})
export class LoggerComponent {
  count = signal(0);

  constructor() {
    // L'effect viene eseguito immediatamente e poi ogni volta
    // che count() cambia valore
    effect(() => {
      console.log(`Il contatore vale: ${this.count()}`);
      // Output: "Il contatore vale: 0" (subito)
      // Output: "Il contatore vale: 1" (dopo click)
    });
  }

  increment() {
    this.count.update(v => v + 1);
  }
}
    

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

const pollingInterval = signal(5000);

effect((onCleanup) => {
  const interval = pollingInterval();

  const timerId = setInterval(() => {
    console.log('Polling dati dal server...');
  }, interval);

  // Questa funzione viene chiamata PRIMA della prossima esecuzione
  // e quando il componente viene distrutto
  onCleanup(() => {
    clearInterval(timerId);
    console.log('Timer pulito');
  });
});
    

import { signal, effect, inject, Injector, Component } from '@angular/core';

@Component({
  selector: 'app-deferred',
  standalone: true,
  template: `<button (click)="startTracking()">Avvia tracking</button>`
})
export class DeferredEffectComponent {
  private injector = inject(Injector);
  data = signal('');

  startTracking() {
    // Passiamo l'injector esplicitamente
    effect(() => {
      console.log('Dati aggiornati:', this.data());
    }, { injector: this.injector });
  }
}
    

import { Component, input, computed } from '@angular/core';

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ displayName() }}</h3>
      <span class="badge" [class.active]="isActive()">
        {{ isActive() ? 'Attivo' : 'Inattivo' }}
      </span>
    </div>
  `
})
export class UserCardComponent {
  // Input opzionale con valore di default
  name = input('Anonimo');           // InputSignal<string>

  // Input obbligatorio (il parent DEVE fornirlo)
  userId = input.required<number>(); // InputSignal<number>

  // Input con alias (nome diverso nel template del parent)
  active = input(false, { alias: 'isUserActive' });

  // Computed che dipendono dagli input - tutto reattivo!
  displayName = computed(() =>
    `${this.name()} (ID: ${this.userId()})`
  );
  isActive = computed(() => this.active());
}

// Uso nel parent:
// <app-user-card [name]="'Federico'" [userId]="42" [isUserActive]="true" />
    

import { Component, input, booleanAttribute, numberAttribute } from '@angular/core';

@Component({
  selector: 'app-settings',
  standalone: true,
  template: `
    <p>Colonne: {{ columns() }}</p>
    <p>Disabilitato: {{ disabled() }}</p>
  `
})
export class SettingsComponent {
  // Converte automaticamente la stringa "3" nel numero 3
  columns = input(1, { transform: numberAttribute });

  // Converte la presenza dell'attributo in boolean
  // <app-settings disabled /> => true
  disabled = input(false, { transform: booleanAttribute });
}
    

import { Component, input, output } from '@angular/core';

@Component({
  selector: 'app-todo-item',
  standalone: true,
  template: `
    <div class="todo">
      <span>{{ text() }}</span>
      <button (click)="onComplete()">Completa</button>
      <button (click)="onDelete()">Elimina</button>
    </div>
  `
})
export class TodoItemComponent {
  // Input
  text = input.required<string>();
  todoId = input.required<number>();

  // Output - tipizzati e type-safe
  completed = output<number>();    // OutputEmitterRef<number>
  deleted = output<number>();      // OutputEmitterRef<number>

  onComplete() {
    this.completed.emit(this.todoId());
  }

  onDelete() {
    this.deleted.emit(this.todoId());
  }
}

// Uso nel parent:
// <app-todo-item
//   [text]="'Studiare Signals'"
//   [todoId]="1"
//   (completed)="handleComplete($event)"
//   (deleted)="handleDelete($event)"
// />
    

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

@Component({
  selector: 'app-rating',
  standalone: true,
  template: `
    <div class="stars">
      @for (star of stars; track star) {
        <span
          (click)="value.set(star)"
          [class.filled]="star <= value()">
          ★
        </span>
      }
    </div>
  `
})
export class RatingComponent {
  // model() crea un WritableSignal con two-way binding
  value = model(0);         // ModelSignal<number>
  stars = [1, 2, 3, 4, 5];
}

// Uso nel parent con banana-in-a-box syntax:
// <app-rating [(value)]="userRating" />
// Quando il child chiama value.set(3), userRating nel parent si aggiorna
    

import {
  Component, viewChild, viewChildren,
  ElementRef, AfterViewInit, effect
} from '@angular/core';

@Component({
  selector: 'app-gallery',
  standalone: true,
  template: `
    <input #searchInput type="text" placeholder="Cerca..." />

    <div class="gallery">
      @for (img of images(); track img.id) {
        <img #galleryItem [src]="img.url" [alt]="img.title" />
      }
    </div>
  `
})
export class GalleryComponent {
  images = signal([
    { id: 1, url: '/img1.jpg', title: 'Foto 1' },
    { id: 2, url: '/img2.jpg', title: 'Foto 2' },
  ]);

  // viewChild restituisce un Signal<ElementRef | undefined>
  searchInput = viewChild<ElementRef>('searchInput');

  // viewChild.required restituisce Signal<ElementRef> (no undefined)
  // requiredInput = viewChild.required<ElementRef>('searchInput');

  // viewChildren restituisce Signal<readonly ElementRef[]>
  galleryItems = viewChildren<ElementRef>('galleryItem');

  constructor() {
    // Reagisci quando gli elementi della gallery cambiano
    effect(() => {
      const items = this.galleryItems();
      console.log(`Gallery ha ${items.length} elementi`);
    });

    // Focus automatico sull'input di ricerca
    effect(() => {
      const input = this.searchInput();
      if (input) {
        input.nativeElement.focus();
      }
    });
  }
}
    

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

@Component({
  selector: 'app-search',
  standalone: true,
  template: `
    <input
      [value]="query()"
      (input)="onSearch($event)"
      placeholder="Cerca prodotti..." />

    <div class="filters">
      <select (change)="onCategoryChange($event)">
        <option value="">Tutte le categorie</option>
        <option value="electronics">Elettronica</option>
        <option value="books">Libri</option>
      </select>
    </div>

    <p>Trovati {{ filteredProducts().length }} risultati</p>

    @for (product of filteredProducts(); track product.id) {
      <div class="product-card">
        <h4>{{ product.name }}</h4>
        <span>{{ product.price | currency:'EUR' }}</span>
      </div>
    }
  `
})
export class SearchComponent {
  // Stato reattivo del form
  query = signal('');
  category = signal('');
  products = signal<Product[]>([]);

  // Stato derivato: filtraggio reattivo
  filteredProducts = computed(() => {
    const q = this.query().toLowerCase();
    const cat = this.category();
    return this.products().filter(p =>
      p.name.toLowerCase().includes(q) &&
      (!cat || p.category === cat)
    );
  });

  onSearch(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.query.set(value);
  }

  onCategoryChange(event: Event) {
    const value = (event.target as HTMLSelectElement).value;
    this.category.set(value);
  }
}

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}
    

import { Injectable, signal, computed } from '@angular/core';

interface CartItem {
  productId: number;
  name: string;
  price: number;
  quantity: number;
}

@Injectable({ providedIn: 'root' })
export class CartService {
  // Stato privato
  private _items = signal<CartItem[]>([]);
  private _discount = signal(0);

  // Stato pubblico read-only
  readonly items = this._items.asReadonly();
  readonly discount = this._discount.asReadonly();

  // Stato derivato
  readonly itemCount = computed(() =>
    this._items().reduce((sum, item) => sum + item.quantity, 0)
  );

  readonly subtotal = computed(() =>
    this._items().reduce((sum, item) => sum + item.price * item.quantity, 0)
  );

  readonly total = computed(() => {
    const sub = this.subtotal();
    const disc = this._discount();
    return sub - (sub * disc / 100);
  });

  readonly isEmpty = computed(() => this._items().length === 0);

  // Azioni pubbliche
  addItem(product: Omit<CartItem, 'quantity'>) {
    this._items.update(items => {
      const existing = items.find(i => i.productId === product.productId);
      if (existing) {
        return items.map(i =>
          i.productId === product.productId
            ? { ...i, quantity: i.quantity + 1 }
            : i
        );
      }
      return [...items, { ...product, quantity: 1 }];
    });
  }

  removeItem(productId: number) {
    this._items.update(items =>
      items.filter(i => i.productId !== productId)
    );
  }

  applyDiscount(percent: number) {
    this._discount.set(Math.min(percent, 50)); // Max 50%
  }

  clearCart() {
    this._items.set([]);
    this._discount.set(0);
  }
}
    

import { Component, signal, computed, inject, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface ApiState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

@Component({
  selector: 'app-users-list',
  standalone: true,
  template: `
    @if (state().loading) {
      <div class="spinner">Caricamento...</div>
    }

    @if (state().error; as error) {
      <div class="error">Errore: {{ error }}</div>
    }

    @if (state().data; as users) {
      <ul>
        @for (user of users; track user.id) {
          <li>{{ user.name }} - {{ user.email }}</li>
        }
      </ul>
    }
  `
})
export class UsersListComponent implements OnInit {
  private http = inject(HttpClient);

  state = signal<ApiState<User[]>>({
    data: null,
    loading: false,
    error: null
  });

  // Computed di convenienza
  isLoading = computed(() => this.state().loading);
  hasError = computed(() => this.state().error !== null);

  ngOnInit() {
    this.loadUsers();
  }

  loadUsers() {
    // Imposta loading
    this.state.set({ data: null, loading: true, error: null });

    this.http.get<User[]>('/api/users').subscribe({
      next: (users) => {
        this.state.set({ data: users, loading: false, error: null });
      },
      error: (err) => {
        this.state.set({
          data: null,
          loading: false,
          error: err.message || 'Errore sconosciuto'
        });
      }
    });
  }
}

interface User {
  id: number;
  name: string;
  email: string;
}
    

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { interval } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `
    <p>Utenti: {{ users()?.length ?? 'Caricamento...' }}</p>
    <p>Timer: {{ timer() }} secondi</p>
  `
})
export class DashboardComponent {
  private http = inject(HttpClient);

  // Converti un HTTP Observable in Signal
  // Il Signal sarà undefined finchè la risposta non arriva
  users = toSignal(this.http.get<User[]>('/api/users'));

  // Con valore iniziale (evita undefined)
  timer = toSignal(interval(1000), { initialValue: 0 });

  // Con requireSync per Observable che emettono subito (es. BehaviorSubject)
  // config = toSignal(this.configService.config$, { requireSync: true });
}
    

import { Component, signal, inject, effect } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-autocomplete',
  standalone: true,
  template: `
    <input
      [value]="searchTerm()"
      (input)="onInput($event)"
      placeholder="Cerca..." />

    @for (result of results(); track result.id) {
      <div>{{ result.name }}</div>
    }
  `
})
export class AutocompleteComponent {
  private http = inject(HttpClient);

  searchTerm = signal('');

  // Converti Signal in Observable, applica operatori RxJS,
  // poi riconverti in Signal
  results = toSignal(
    toObservable(this.searchTerm).pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(term =>
        term.length > 2
          ? this.http.get<SearchResult[]>(`/api/search?q=${term}`)
          : []
      )
    ),
    { initialValue: [] as SearchResult[] }
  );

  onInput(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    this.searchTerm.set(value);
  }
}

interface SearchResult {
  id: number;
  name: string;
}
    

// PRIMA (Zone.js)
@Component({ ... })
export class CounterComponent {
  count = 0;
  label = 'Contatore';

  increment() {
    this.count++;
  }
}
// Template: {{ count }} - {{ label }}

// DOPO (Signals)
@Component({ ... })
export class CounterComponent {
  count = signal(0);
  label = signal('Contatore');

  increment() {
    this.count.update(v => v + 1);
  }
}
// Template: {{ count() }} - {{ label() }}
    

// PRIMA
get fullName(): string {
  return `${this.firstName} ${this.lastName}`;
}
get isValid(): boolean {
  return this.email.includes('@') && this.name.length > 0;
}

// DOPO
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
isValid = computed(() =>
  this.email().includes('@') && this.name().length > 0
);
    

// PRIMA (sottoscrizione manuale)
@Component({ ... })
export class UserProfileComponent implements OnInit, OnDestroy {
  user: User | null = null;
  private destroy$ = new Subject<void>();

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.currentUser$
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => this.user = user);
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// DOPO (con toSignal - zero boilerplate)
@Component({ ... })
export class UserProfileComponent {
  private userService = inject(UserService);

  // Si sottoscrive automaticamente, si pulisce automaticamente
  user = toSignal(this.userService.currentUser$);
}
    

// ERRORE 1: Modificare un Signal dentro computed()
const a = signal(1);
const b = signal(0);
const sum = computed(() => {
  b.set(a() * 2);  // MAI! Side effect in computed
  return a() + b();
});

// ERRORE 2: Dimenticare le parentesi nel template
// <p>{{ count }}</p>     <-- Mostra la funzione, non il valore!
// <p>{{ count() }}</p>   <-- Corretto

// ERRORE 3: Mutare l'oggetto invece di crearne uno nuovo
const user = signal({ name: 'Fed', age: 30 });
// NON fare questo:
user().name = 'Marco';    // La mutation non viene rilevata!
// Fai invece:
user.update(u => ({ ...u, name: 'Marco' }));

// ERRORE 4: Loop infinito con effect
const counter = signal(0);
effect(() => {
  // Legge e scrive lo stesso Signal = loop!
  counter.set(counter() + 1);
});

// ERRORE 5: toSignal() fuori dall'injection context
@Component({ ... })
export class BadComponent {
  // Questo funziona (campo di classe)
  data = toSignal(this.http.get('/api/data'));

  onClick() {
    // Questo NON funziona (metodo, no injection context)
    const result = toSignal(this.http.get('/api/other'));
  }
}