Angular Signals: The Complete Guide from Beginner to Advanced

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

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count() }}</p>
      <button (click)="increment()">Increment</button>
    </div>
  `
})
export class CounterComponent {
  // Creating a signal
  count = signal(0);

  increment() {
    // Updating a signal
    this.count.set(this.count() + 1);
    
    // Alternative: update based on current value
    // this.count.update(value => value + 1);
  }
}

export class SignalMethodsComponent {
  counter = signal(0);
  user = signal({ name: 'John', age: 30 });

  // ✅ GOOD: Use set() when you have the complete new value
  resetCounter() {
    this.counter.set(0);
  }

  // ✅ GOOD: Use update() when new value depends on old value
  incrementCounter() {
    this.counter.update(current => current + 1);
  }

  // ❌ BAD: Don't read and set separately (race condition risk)
  badIncrement() {
    const current = this.counter();
    this.counter.set(current + 1); // Not atomic!
  }

  // ✅ GOOD: update() is atomic and safe
  updateUserAge() {
    this.user.update(u => ({ ...u, age: u.age + 1 }));
  }
}

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

@Component({
  selector: 'app-shopping-cart',
  template: `
    <div>
      <p>Items: {{ itemCount() }}</p>
      <p>Price: {{ itemPrice() }}</p>
      <p>Total: {{ total() }}</p>
      <p>Status: {{ status() }}</p>
    </div>
  `
})
export class ShoppingCartComponent {
  itemCount = signal(3);
  itemPrice = signal(25.99);

  // Computed signal - automatically recalculates
  total = computed(() => this.itemCount() * this.itemPrice());

  // Computed can depend on other computed signals
  status = computed(() => {
    const t = this.total();
    return t > 100 ? 'Premium Order' : 'Standard Order';
  });
}

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

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

  constructor() {
    // Effect runs whenever count changes
    effect(() => {
      console.log(`Count changed to: ${this.count()}`);
      // Save to localStorage
      localStorage.setItem('count', this.count().toString());
    });
  }

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

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

@Component({
  selector: 'app-user-card',
  template: `
    <div>
      <h3>{{ fullName() }}</h3>
      <p>Age: {{ age() }}</p>
      <p>Required: {{ userName() }}</p>
      <input [(ngModel)]="email" />
    </div>
  `
})
export class UserCardComponent {
  // Required input
  userName = input.required<string>();
  
  // Optional input with default
  age = input(18);
  
  // Input with transform
  firstName = input('', { transform: (v: string) => v.trim() });
  lastName = input('', { transform: (v: string) => v.trim() });
  
  // Two-way binding with model()
  email = model<string>('user@example.com');
  
  // Computed based on inputs
  fullName = computed(() => 
    `${this.firstName()} ${this.lastName()}`.trim()
  );
}

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

@Component({
  selector: 'app-parent',
  template: `
    <input #searchInput type="text" />
    <div #item class="item">Item 1</div>
    <div #item class="item">Item 2</div>
    <button (click)="focusSearch()">Focus Search</button>
    <ng-content></ng-content>
  `
})
export class ParentComponent {
  // Single element query (replaces @ViewChild)
  searchInput = viewChild<ElementRef>('searchInput');
  
  // Required query
  firstItem = viewChild.required<ElementRef>('item');
  
  // Multiple elements (replaces @ViewChildren)
  allItems = viewChildren<ElementRef>('item');
  
  // Content query (replaces @ContentChild)
  projectedContent = contentChild<ElementRef>('projected');

  focusSearch() {
    // Signal queries are always defined (or undefined)
    this.searchInput()?.nativeElement.focus();
    
    console.log(`Found ${this.allItems().length} items`);
  }
}

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

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

@Component({
  selector: 'app-todo-list',
  template: `
    <div *ngFor="let todo of todos()">
      <input 
        type="checkbox" 
        [checked]="todo.completed"
        (change)="toggleTodo(todo.id)" />
      {{ todo.text }}
    </div>
    <p>Completed: {{ completedCount() }}</p>
  `
})
export class TodoListComponent {
  todos = signal<Todo[]>([
    { id: 1, text: 'Learn Signals', completed: false },
    { id: 2, text: 'Build App', completed: false }
  ]);

  completedCount = computed(() => 
    this.todos().filter(t => t.completed).length
  );

  // ✅ GOOD: Create new array reference
  addTodo(text: string) {
    this.todos.update(current => [
      ...current,
      { id: Date.now(), text, completed: false }
    ]);
  }

  // ✅ GOOD: Immutable update pattern
  toggleTodo(id: number) {
    this.todos.update(current =>
      current.map(todo =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  }

  // ❌ BAD: Mutating signal value directly
  badToggle(id: number) {
    const todos = this.todos();
    const todo = todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed; // Won't trigger updates!
    }
  }
}

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

@Component({
  selector: 'app-large-data',
  template: `<p>Items: {{ data().items.length }}</p>`
})
export class LargeDataComponent {
  data = signal<{ items: number[], metadata: any }>({
    items: Array.from({ length: 10000 }, (_, i) => i),
    metadata: {}
  });

  // ✅ Use mutate() for performance with large data structures
  addItem(item: number) {
    this.data.mutate(d => {
      d.items.push(item); // Direct mutation
    });
  }

  // ❌ Spreading large arrays is expensive
  inefficientAdd(item: number) {
    this.data.update(d => ({
      ...d,
      items: [...d.items, item] // Creates copy of 10000 items!
    }));
  }
}

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

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

interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
  selectedUserId: number | null;
}

@Injectable({ providedIn: 'root' })
export class UserStore {
  // Private state signal
  private state = signal<UserState>({
    users: [],
    loading: false,
    error: null,
    selectedUserId: null
  });

  // Public computed selectors
  users = computed(() => this.state().users);
  loading = computed(() => this.state().loading);
  error = computed(() => this.state().error);
  
  selectedUser = computed(() => {
    const state = this.state();
    return state.users.find(u => u.id === state.selectedUserId) ?? null;
  });

  constructor(private http: HttpClient) {}

  // Actions
  async loadUsers() {
    this.state.update(s => ({ ...s, loading: true, error: null }));
    
    try {
      const users = await this.http.get<User[]>('/api/users').toPromise();
      this.state.update(s => ({ ...s, users, loading: false }));
    } catch (error) {
      this.state.update(s => ({
        ...s,
        loading: false,
        error: 'Failed to load users'
      }));
    }
  }

  selectUser(id: number) {
    this.state.update(s => ({ ...s, selectedUserId: id }));
  }

  updateUser(id: number, updates: Partial<User>) {
    this.state.update(s => ({
      ...s,
      users: s.users.map(u => u.id === id ? { ...u, ...updates } : u)
    }));
  }
}

import { Component, signal } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { interval, map } from 'rxjs';

@Component({
  selector: 'app-rxjs-interop',
  template: `
    <div>
      <p>Search: <input [(ngModel)]="searchTerm" /></p>
      <p>Results: {{ searchResults() }}</p>
      <p>Timer: {{ timer() }}</p>
    </div>
  `
})
export class RxjsInteropComponent {
  searchTerm = signal('');

  // Convert signal to observable
  searchTerm$ = toObservable(this.searchTerm);

  // Use with RxJS operators
  searchResults$ = this.searchTerm$.pipe(
    map(term => `Searching for: ${term}`)
  );

  // Convert observable back to signal
  searchResults = toSignal(this.searchResults$, { initialValue: '' });

  // Observable to signal
  timer = toSignal(
    interval(1000).pipe(map(n => n)),
    { initialValue: 0 }
  );
}

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

@Component({
  selector: 'app-websocket',
  template: `<p>Messages: {{ messageCount() }}</p>`
})
export class WebSocketComponent {
  messageCount = signal(0);
  private ws: WebSocket | null = null;

  constructor() {
    effect((onCleanup) => {
      // Setup: runs when effect executes
      console.log('Connecting to WebSocket...');
      this.ws = new WebSocket('ws://example.com');
      
      this.ws.onmessage = () => {
        this.messageCount.update(c => c + 1);
      };

      // Cleanup: runs before next execution or on destroy
      onCleanup(() => {
        console.log('Closing WebSocket...');
        this.ws?.close();
        this.ws = null;
      });
    });
  }
}

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

// Debounced signal
export function debouncedSignal<T>(initialValue: T, delayMs: number) {
  const immediate = signal(initialValue);
  const debounced = signal(initialValue);
  let timeoutId: any;

  return {
    set: (value: T) => {
      immediate.set(value);
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => debounced.set(value), delayMs);
    },
    immediate: immediate.asReadonly(),
    debounced: debounced.asReadonly()
  };
}

// Async signal
export function asyncSignal<T>(promiseFn: () => Promise<T>, initialValue: T) {
  const value = signal(initialValue);
  const loading = signal(false);
  const error = signal<Error | null>(null);

  const load = async () => {
    loading.set(true);
    error.set(null);
    try {
      const result = await promiseFn();
      value.set(result);
    } catch (e) {
      error.set(e as Error);
    } finally {
      loading.set(false);
    }
  };

  return {
    value: value.asReadonly(),
    loading: loading.asReadonly(),
    error: error.asReadonly(),
    reload: load
  };
}

// Usage
const search = debouncedSignal('', 300);
search.set('Angular'); // Immediate update
console.log(search.debounced()); // Updates after 300ms

const userData = asyncSignal(
  () => fetch('/api/user').then(r => r.json()),
  null
);
userData.reload();

// ❌ BAD: Direct mutation doesn't trigger updates
const user = signal({ name: 'John', age: 30 });
user().age = 31; // Won't update!

// ✅ GOOD: Create new object reference
user.update(u => ({ ...u, age: 31 }));

// ❌ BAD: Using effect for derived state
const count = signal(0);
const doubled = signal(0);

effect(() => {
  doubled.set(count() * 2); // Don't do this!
});

// ✅ GOOD: Use computed
const doubled = computed(() => count() * 2);

// ❌ BAD: Effect outside constructor
export class MyComponent {
  count = signal(0);

  ngOnInit() {
    effect(() => console.log(this.count())); // Error!
  }
}

// ✅ GOOD: Effect in constructor or with explicit injector
import { Injector, inject } from '@angular/core';

export class MyComponent {
  private injector = inject(Injector);
  count = signal(0);

  ngOnInit() {
    effect(() => console.log(this.count()), { 
      injector: this.injector 
    });
  }
}

// ❌ BAD: Accessing signal without calling it
const count = signal(0);
console.log(count); // Logs the signal object, not the value

// ✅ GOOD: Call signal to get value
console.log(count()); // Logs 0

// ❌ BAD: Signal for static data
export class Component {
  config = signal({ apiUrl: 'https://api.example.com' }); // Overkill!
}

// ✅ GOOD: Use regular properties for static data
export class Component {
  readonly config = { apiUrl: 'https://api.example.com' };
}

// ❌ BAD: Effect that modifies its own dependencies
const count = signal(0);

effect(() => {
  console.log(count());
  count.set(count() + 1); // Infinite loop!
});

// ✅ GOOD: Effects should only read signals, not modify them
effect(() => {
  console.log(count());
  // Perform side effects, don't modify dependencies
});

// ❌ BAD: Async operation in effect
const userId = signal(1);

effect(async () => {
  const data = await fetch(`/api/users/${userId()}`);
  // Effect doesn't track async dependencies properly
});

// ✅ GOOD: Use dedicated pattern
const userId = signal(1);
const userData = signal(null);

effect(() => {
  const id = userId(); // Track dependency
  fetch(`/api/users/${id}`)
    .then(data => userData.set(data));
});

// Start using signals in new components
export class NewComponent {
  // ✅ Use signals for new code
  count = signal(0);
  doubled = computed(() => this.count() * 2);
}

// Refactor hot paths and performance-critical components
export class ExistingComponent {
  // Before: @Input() userId!: number;
  // After:
  userId = input.required<number>();
  
  // Before: get userName() { ... }
  // After:
  userName = computed(() => { ... });
}

// Eventually: fully signal-based with OnPush
@Component({
  selector: 'app-optimized',
  changeDetection: ChangeDetectionStrategy.OnPush,
  // ...
})
export class OptimizedComponent {
  // All reactive state as signals
}

// ❌ BEFORE: Reactive Forms — scattered across constructor + ngOnInit
export class LegacyProfile implements OnInit {
  profileForm!: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.profileForm = this.fb.group({
      name: ['', Validators.required],
      address: this.fb.group({
        city: ['', Validators.required]
      }),
      phones: this.fb.array([ this.fb.control('') ])
    });
  }
}

// ✅ AFTER: Signal Forms — one declarative block, no lifecycle hooks
export class ModernProfile {
  profileForm = signalFormGroup({
    name: signalFormControl('', { validators: [validators.required] }),
    address: signalFormGroup({
      city: signalFormControl('', { validators: [validators.required] })
    }),
    phones: signalFormArray([ signalFormControl('') ])
  });
}

<!-- ❌ BEFORE: String-based binding — typo "naem" won't error until runtime -->
<form [formGroup]="profileForm">
  <input formControlName="name" />
  <div formGroupName="address">
    <input formControlName="city" />
  </div>
  <button [disabled]="profileForm.invalid">Submit</button>
</form>

<!-- ✅ AFTER: Direct reference binding — typo caught at compile time -->
<form [formGroup]="profileForm">
  <input [formField]="profileForm.controls.name" />
  <div [formGroup]="profileForm.controls.address">
    <input [formField]="profileForm.controls.address.controls.city" />
  </div>
  <button [disabled]="profileForm.invalid()">Submit</button>
</form>

// ❌ BEFORE: The infamous "cast getter" pattern
get phones() {
  return this.profileForm.get('phones') as FormArray; // No type safety!
}
addPhone() {
  this.phones.push(this.fb.control(''));
}

// ✅ AFTER: Type-safe, no casting needed
get phonesArray() {
  return this.profileForm.controls.phones; // Already typed as signalFormArray!
}
addPhone() {
  this.phonesArray.push(signalFormControl(''));
}

// ❌ BEFORE: The RxJS ceremony
private destroy$ = new Subject<void>();

ngOnInit() {
  this.profileForm.valueChanges.pipe(
    debounceTime(500),
    takeUntil(this.destroy$)
  ).subscribe(val => this.autoSave(val));
}

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

// ✅ AFTER: Just an effect, that's it
constructor() {
  effect(() => {
    const val = this.profileForm.value(); // Reactive tracking!
    this.autoSave(val);
  });
  // No ngOnDestroy needed — Angular handles cleanup automatically
}

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

interface Todo {
  id: number;
  text: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
}

type Filter = 'all' | 'active' | 'completed';

@Component({
  selector: 'app-todo',
  template: `
    <div class="todo-app">
      <input 
        #newTodo
        (keyup.enter)="addTodo(newTodo.value); newTodo.value = ''"
        placeholder="What needs to be done?" />
      
      <select [(ngModel)]="filter">
        <option value="all">All ({{ todos().length }})</option>
        <option value="active">Active ({{ activeCount() }})</option>
        <option value="completed">Completed ({{ completedCount() }})</option>
      </select>

      <ul>
        <li *ngFor="let todo of filteredTodos()" 
            [class.completed]="todo.completed"
            [class.priority-high]="todo.priority === 'high'">
          <input 
            type="checkbox"
            [checked]="todo.completed"
            (change)="toggleTodo(todo.id)" />
          <span>{{ todo.text }}</span>
          <button (click)="removeTodo(todo.id)">Delete</button>
        </li>
      </ul>

      <div class="stats">
        <p>Progress: {{ progressPercent() }}%</p>
        <p>High Priority: {{ highPriorityCount() }}</p>
      </div>
    </div>
  `
})
export class TodoAppComponent {
  // State
  todos = signal<Todo[]>(this.loadFromStorage());
  filter = signal<Filter>('all');

  // Computed values
  activeCount = computed(() => 
    this.todos().filter(t => !t.completed).length
  );

  completedCount = computed(() => 
    this.todos().filter(t => t.completed).length
  );

  filteredTodos = computed(() => {
    const filter = this.filter();
    const todos = this.todos();
    
    switch (filter) {
      case 'active':
        return todos.filter(t => !t.completed);
      case 'completed':
        return todos.filter(t => t.completed);
      default:
        return todos;
    }
  });

  progressPercent = computed(() => {
    const total = this.todos().length;
    if (total === 0) return 0;
    return Math.round((this.completedCount() / total) * 100);
  });

  highPriorityCount = computed(() =>
    this.todos().filter(t => !t.completed && t.priority === 'high').length
  );

  constructor() {
    // Side effect: persist to localStorage
    effect(() => {
      const todos = this.todos();
      localStorage.setItem('todos', JSON.stringify(todos));
      console.log(`Saved ${todos.length} todos`);
    });
  }

  // Actions
  addTodo(text: string) {
    if (!text.trim()) return;
    
    this.todos.update(current => [
      ...current,
      {
        id: Date.now(),
        text: text.trim(),
        completed: false,
        priority: 'medium'
      }
    ]);
  }

  toggleTodo(id: number) {
    this.todos.update(current =>
      current.map(todo =>
        todo.id === id
 ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  }

  removeTodo(id: number) {
    this.todos.update(current => current.filter(t => t.id !== id));
  }

  private loadFromStorage(): Todo[] {
    try {
      return JSON.parse(localStorage.getItem('todos') || '[]');
    } catch {
      return [];
    }
  }
}