1 - Angular Signals: From Zero to Production

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

// Create a writable signal with an initial value
const count = signal(0);             // WritableSignal<number>
const name = signal('Angular');      // WritableSignal<string>
const items = signal<string[]>([]);  // WritableSignal<string[]>

// Read the current value by calling the signal as a function
console.log(count());   // 0
console.log(name());    // 'Angular'
console.log(items());   // []

// Set a new value with .set()
count.set(5);
console.log(count());   // 5

// Update based on the current value with .update()
count.update(current => current + 1);
console.log(count());   // 6

// For objects/arrays, use .update() to maintain immutability
items.update(list => [...list, 'New Item']);

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

@Injectable({ providedIn: 'root' })
export class CounterService {
  // Private writable signal
  private _count = signal(0);

  // Public read-only signal
  readonly count: Signal<number> = this._count.asReadonly();

  increment(): void {
    this._count.update(c => c + 1);
  }

  decrement(): void {
    this._count.update(c => c - 1);
  }

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

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

// Custom equality: only re-notify if the ID changes
const currentUser = signal<User>(
  { id: 1, name: 'Alice', email: 'alice@example.com' },
  { equal: (a, b) => a.id === b.id }
);

// This will NOT trigger dependents (same ID)
currentUser.set({ id: 1, name: 'Alice Updated', email: 'alice@new.com' });

// This WILL trigger dependents (different ID)
currentUser.set({ id: 2, name: 'Bob', email: 'bob@example.com' });

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

const price = signal(100);
const quantity = signal(3);
const taxRate = signal(0.22);

// Computed signal: automatically tracks price, quantity, taxRate
const subtotal = computed(() => price() * quantity());
const tax = computed(() => subtotal() * taxRate());
const total = computed(() => subtotal() + tax());

console.log(total()); // 366

// When price changes, subtotal, tax, and total are all invalidated
price.set(200);
console.log(total()); // 732

// Computed signals can depend on other computed signals
const formattedTotal = computed(() => `${total().toFixed(2)} EUR`);

const showDetails = signal(false);
const basicInfo = signal('Basic info');
const detailedInfo = signal('Detailed info');

const displayText = computed(() => {
  if (showDetails()) {
    // When showDetails is true, depends on: showDetails, detailedInfo
    return detailedInfo();
  }
  // When showDetails is false, depends on: showDetails, basicInfo
  return basicInfo();
});

// Changes to detailedInfo do NOT trigger recomputation
// because showDetails() is false (detailedInfo is not read)
detailedInfo.set('New detailed info');
console.log(displayText()); // 'Basic info' - no recomputation needed

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `<p>User: {{ username() }}</p>`
})
export class UserProfileComponent {
  username = signal('guest');

  constructor() {
    // Effect runs whenever username() changes
    effect(() => {
      console.log(`Username changed to: ${this.username()}`);
      // Sync to localStorage
      localStorage.setItem('username', this.username());
    });
  }
}

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

@Component({
  selector: 'app-search',
  standalone: true,
  template: `<input (input)="onSearch($event)" />`
})
export class SearchComponent {
  searchTerm = signal('');

  constructor() {
    effect((onCleanup) => {
      const term = this.searchTerm();
      if (!term) return;

      const controller = new AbortController();

      // Perform the search
      fetch(`/api/search?q=${term}`, {
        signal: controller.signal
      }).then(res => res.json())
        .then(data => console.log(data))
        .catch(err => {
          if (err.name !== 'AbortError') throw err;
        });

      // Cleanup: abort the previous request when term changes
      onCleanup(() => controller.abort());
    });
  }

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

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

export class TimerComponent {
  seconds = signal(0);
  private timerEffect: EffectRef;

  constructor() {
    this.timerEffect = effect(() => {
      console.log(`Timer: ${this.seconds()}s`);
    });
  }

  stopLogging(): void {
    // Manually destroy the effect - it will no longer run
    this.timerEffect.destroy();
  }
}

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ name() }}</h3>
      <p>Role: {{ role() }}</p>
      <p>Score: {{ score() }}</p>
    </div>
  `
})
export class UserCardComponent {
  // Required input - parent MUST provide this
  name = input.required<string>();

  // Optional input with default value
  role = input('viewer');  // InputSignal<string>, defaults to 'viewer'

  // Optional input with explicit type
  score = input<number>(0);

  // Input with alias (for backwards compatibility)
  // Usage: <app-user-card [userName]="..." />
  name2 = input.required<string>({ alias: 'userName' });

  // Input with transform function
  disabled = input(false, {
    transform: (value: boolean | string) =>
      typeof value === 'string' ? value !== 'false' : value
  });
}

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

@Component({
  selector: 'app-todo-item',
  standalone: true,
  template: `
    <div class="todo">
      <span>{{ label() }}</span>
      <button (click)="onComplete()">Complete</button>
      <button (click)="onDelete()">Delete</button>
    </div>
  `
})
export class TodoItemComponent {
  // Signal input
  label = input.required<string>();
  id = input.required<number>();

  // Function-based outputs
  completed = output<number>();    // OutputEmitterRef<number>
  deleted = output<number>();      // OutputEmitterRef<number>

  onComplete(): void {
    this.completed.emit(this.id());
  }

  onDelete(): void {
    this.deleted.emit(this.id());
  }
}

// Parent usage:
// <app-todo-item
//   [label]="todo.label"
//   [id]="todo.id"
//   (completed)="markComplete($event)"
//   (deleted)="removeTodo($event)"
// />

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

// Child component with model signal
@Component({
  selector: 'app-rating',
  standalone: true,
  template: `
    <div class="stars">
      @for (star of stars(); track star) {
        <span
          [class.active]="star <= value()"
          (click)="selectRating(star)">
          ★
        </span>
      }
    </div>
  `
})
export class RatingComponent {
  // model() creates a writable signal with two-way binding
  value = model(0);      // ModelSignal<number>
  maxStars = input(5);   // InputSignal<number>

  stars = computed(() =>
    Array.from({ length: this.maxStars() }, (_, i) => i + 1)
  );

  selectRating(star: number): void {
    this.value.set(star);  // Updates the parent's bound value too
  }
}

// Parent component
@Component({
  selector: 'app-review',
  standalone: true,
  imports: [RatingComponent],
  template: `
    <h3>Your Rating: {{ rating() }}</h3>
    <app-rating [(value)]="rating" />
    <button (click)="rating.set(0)">Reset</button>
  `
})
export class ReviewComponent {
  rating = signal(3);
}

import {
  Component, viewChild, viewChildren,
  ElementRef, signal, afterNextRender
} from '@angular/core';

@Component({
  selector: 'app-gallery',
  standalone: true,
  template: `
    <div #container class="gallery">
      @for (image of images(); track image.id) {
        <img #imageEl [src]="image.url" [alt]="image.title" />
      }
    </div>
    <button (click)="scrollToTop()">Scroll to Top</button>
  `
})
export class GalleryComponent {
  images = signal([
    { id: 1, url: '/img/1.jpg', title: 'Photo 1' },
    { id: 2, url: '/img/2.jpg', title: 'Photo 2' },
    { id: 3, url: '/img/3.jpg', title: 'Photo 3' },
  ]);

  // viewChild: returns Signal<ElementRef | undefined>
  container = viewChild<ElementRef>('container');

  // viewChild.required: returns Signal<ElementRef> (no undefined)
  requiredContainer = viewChild.required<ElementRef>('container');

  // viewChildren: returns Signal<readonly ElementRef[]>
  imageElements = viewChildren<ElementRef>('imageEl');

  constructor() {
    afterNextRender(() => {
      // Safe to access the DOM here
      const el = this.container();
      if (el) {
        console.log('Container height:', el.nativeElement.offsetHeight);
      }

      // All image elements
      console.log('Image count:', this.imageElements().length);
    });
  }

  scrollToTop(): void {
    this.container()?.nativeElement.scrollTo({ top: 0, behavior: 'smooth' });
  }
}

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

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

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    @if (loading()) {
      <div class="spinner">Loading...</div>
    } @else if (error()) {
      <div class="error">{{ error() }}</div>
    } @else {
      <input (input)="onFilter($event)" placeholder="Filter..." />
      <p>Showing {{ filteredProducts().length }} of {{ products().length }}</p>
      @for (product of filteredProducts(); track product.id) {
        <div class="product-card">
          <h4>{{ product.name }}</h4>
          <p>{{ product.price | currency }}</p>
        </div>
      }
    }
  `
})
export class ProductListComponent implements OnInit {
  private http = inject(HttpClient);

  // State signals
  products = signal<Product[]>([]);
  loading = signal(true);
  error = signal<string | null>(null);
  filterTerm = signal('');

  // Derived state
  filteredProducts = computed(() => {
    const term = this.filterTerm().toLowerCase();
    if (!term) return this.products();
    return this.products().filter(p =>
      p.name.toLowerCase().includes(term) ||
      p.category.toLowerCase().includes(term)
    );
  });

  ngOnInit(): void {
    this.loadProducts();
  }

  private loadProducts(): void {
    this.loading.set(true);
    this.error.set(null);

    this.http.get<Product[]>('/api/products').subscribe({
      next: (data) => {
        this.products.set(data);
        this.loading.set(false);
      },
      error: (err) => {
        this.error.set('Failed to load products');
        this.loading.set(false);
      }
    });
  }

  onFilter(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.filterTerm.set(input.value);
  }
}

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

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

@Injectable({ providedIn: 'root' })
export class CartService {
  // Private writable state
  private _items = signal<CartItem[]>([]);

  // Public read-only projections
  readonly items = this._items.asReadonly();

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

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

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

  addItem(product: Omit<CartItem, 'quantity'>): void {
    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): void {
    this._items.update(items =>
      items.filter(i => i.productId !== productId)
    );
  }

  clearCart(): void {
    this._items.set([]);
  }
}

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

@Component({
  selector: 'app-registration',
  standalone: true,
  template: `
    <form (submit)="onSubmit($event)">
      <div class="field">
        <label>Email</label>
        <input
          [value]="email()"
          (input)="email.set(toValue($event))"
          [class.invalid]="emailError()"
        />
        @if (emailError()) {
          <span class="error">{{ emailError() }}</span>
        }
      </div>

      <div class="field">
        <label>Password</label>
        <input
          type="password"
          [value]="password()"
          (input)="password.set(toValue($event))"
          [class.invalid]="passwordError()"
        />
        @if (passwordError()) {
          <span class="error">{{ passwordError() }}</span>
        }
        <div class="strength">Strength: {{ passwordStrength() }}</div>
      </div>

      <button [disabled]="!isValid()">Register</button>
    </form>
  `
})
export class RegistrationComponent {
  // Form fields as signals
  email = signal('');
  password = signal('');

  // Validation computed signals
  emailError = computed(() => {
    const val = this.email();
    if (!val) return 'Email is required';
    if (!val.includes('@')) return 'Invalid email format';
    return null;
  });

  passwordError = computed(() => {
    const val = this.password();
    if (!val) return 'Password is required';
    if (val.length < 8) return 'Password must be at least 8 characters';
    return null;
  });

  passwordStrength = computed(() => {
    const val = this.password();
    if (val.length < 8) return 'Weak';
    if (val.length < 12) return 'Medium';
    return 'Strong';
  });

  isValid = computed(() =>
    !this.emailError() && !this.passwordError()
  );

  toValue(event: Event): string {
    return (event.target as HTMLInputElement).value;
  }

  onSubmit(event: Event): void {
    event.preventDefault();
    if (this.isValid()) {
      console.log('Submitting:', {
        email: this.email(),
        password: this.password()
      });
    }
  }
}

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>Server time: {{ serverTime() }}</p>
    <p>Uptime: {{ uptime() }}s</p>
  `
})
export class DashboardComponent {
  private http = inject(HttpClient);

  // Convert HTTP Observable to Signal
  // Type: Signal<string | undefined> (undefined before first emission)
  serverTime = toSignal(
    this.http.get<string>('/api/time')
  );

  // Provide an initial value to avoid undefined
  // Type: Signal<number>
  uptime = toSignal(interval(1000), { initialValue: 0 });

  // requireSync: for Observables that emit synchronously (like BehaviorSubject)
  // Type: Signal<number> (no undefined)
  // counter = toSignal(myBehaviorSubject$, { requireSync: true });
}

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

@Component({
  selector: 'app-search-page',
  standalone: true,
  template: `
    <input
      [value]="query()"
      (input)="query.set(toValue($event))"
      placeholder="Search..."
    />
    @for (result of results(); track result.id) {
      <div>{{ result.title }}</div>
    }
  `
})
export class SearchPageComponent {
  private http = inject(HttpClient);

  query = signal('');
  results = signal<any[]>([]);

  // Convert signal to Observable for RxJS operators
  private query$ = toObservable(this.query);

  constructor() {
    this.query$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(q => this.http.get<any[]>(`/api/search?q=${q}`))
    ).subscribe(results => this.results.set(results));
  }

  toValue(event: Event): string {
    return (event.target as HTMLInputElement).value;
  }
}

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

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

@Component({
  selector: 'app-user-detail',
  standalone: true,
  template: `
    @if (userResource.isLoading()) {
      <div>Loading user...</div>
    } @else if (userResource.error()) {
      <div>Error loading user</div>
    } @else {
      <h2>{{ userResource.value()?.name }}</h2>
      <p>{{ userResource.value()?.email }}</p>
    }

    <button (click)="nextUser()">Next User</button>
  `
})
export class UserDetailComponent {
  userId = signal(1);

  // resource() automatically re-fetches when userId changes
  userResource = resource({
    request: () => ({ id: this.userId() }),
    loader: async ({ request, abortSignal }) => {
      const response = await fetch(
        `/api/users/${request.id}`,
        { signal: abortSignal }
      );
      if (!response.ok) throw new Error('Failed to load user');
      return response.json() as Promise<UserProfile>;
    }
  });

  nextUser(): void {
    this.userId.update(id => id + 1);
  }
}

// BAD: One giant signal for everything
const state = signal({
  user: null,
  products: [],
  cart: [],
  loading: false,
  error: null,
  filters: { category: '', minPrice: 0, maxPrice: 100 }
});
// Updating any field replaces the entire object,
// causing ALL dependents to re-evaluate

// GOOD: Separate signals per concern
const user = signal<User | null>(null);
const products = signal<Product[]>([]);
const cart = signal<CartItem[]>([]);
const loading = signal(false);
const error = signal<string | null>(null);
const filterCategory = signal('');
const filterMinPrice = signal(0);
const filterMaxPrice = signal(100);
// Only dependents of the changed signal re-evaluate

// BAD: Manually synchronizing
const items = signal<Item[]>([]);
const count = signal(0);  // manually kept in sync

function addItem(item: Item): void {
  items.update(list => [...list, item]);
  count.set(items().length);  // easy to forget!
}

// GOOD: Use computed for derived values
const items = signal<Item[]>([]);
const count = computed(() => items().length);  // always correct

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

const firstName = signal('John');
const lastName = signal('Doe');
const logCount = signal(0);

// Only re-compute when firstName changes, not lastName
const greeting = computed(() => {
  const first = firstName();
  const last = untracked(() => lastName());  // read but don't track
  return `Hello, ${first} ${last}`;
});

// Effect that logs changes but doesn't re-run when logCount changes
effect(() => {
  const name = firstName();
  const count = untracked(() => logCount());
  console.log(`[${count}] Name is: ${name}`);
});

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

const selectedCategory = signal('all');
const products = signal<Product[]>([]);

// currentPage resets to 0 whenever selectedCategory changes
const currentPage = linkedSignal(() => {
  selectedCategory();  // track the source
  return 0;            // reset value
});

// But it is still writable for user navigation
function nextPage(): void {
  currentPage.update(p => p + 1);
}

// When the category changes, currentPage automatically goes back to 0
selectedCategory.set('electronics');
console.log(currentPage()); // 0