Core Concepts

Signals

A signal is a value that notifies Angular when it changes. computed() derives a read-only value from other signals and recalculates only when they change. effect() runs side effects, such as logging or syncing to storage, whenever the signals it reads change:

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

@Component({
  selector: 'app-counter',
  template: `
    <p>{{ count() }} x 2 = {{ double() }}</p>
    <button type="button" (click)="increment()">+1</button>
  `,
})
export class Counter {
  protected readonly count = signal(0);
  protected readonly double = computed(() => this.count() * 2);

  constructor() {
    effect(() => console.log('count is now', this.count()));
  }

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

Use set() to replace a value and update() to derive the next value from the current one. Prefer computed() over effect() for anything that can be expressed as a derived value.

Services and dependency injection

Logic that several components share belongs in a service. @Injectable({ providedIn: 'root' }) makes one instance available to the whole app, and inject() retrieves it:

import { Injectable, signal } from '@angular/core';
import { Hero } from './hero-card';

@Injectable({ providedIn: 'root' })
export class HeroService {
  private readonly heroes = signal<Hero[]>([{ id: 1, name: 'Windstorm' }]);
  readonly all = this.heroes.asReadonly();

  add(name: string) {
    this.heroes.update((list) => [...list, { id: Date.now(), name }]);
  }
}

In a component, write private readonly heroService = inject(HeroService); as a class field. Angular creates the service the first time it is requested. To give a component its own instance instead, list the service in that component's providers array.

Routing

Routes map URL paths to components. loadComponent splits a page into a separate bundle that loads only when the route is visited:

import { Routes } from '@angular/router';
import { HeroList } from './heroes/hero-list';

export const routes: Routes = [
  { path: '', component: HeroList, title: 'Heroes' },
  {
    path: 'heroes/:id',
    loadComponent: () => import('./heroes/hero-detail').then((m) => m.HeroDetail),
  },
  { path: '**', redirectTo: '' },
];

Import RouterLink and RouterOutlet where you need them, link with <a routerLink="/heroes/42">, and render the active page with <router-outlet />. With withComponentInputBinding() enabled in provideRouter, a route parameter such as id arrives in the component as readonly id = input<string>(). Guards such as canActivate are plain functions that can inject() services.

Summary

• Components are standalone classes with a selector, a template and their own imports.
• input(), output() and template bindings connect parent and child components.
• @if, @for (with track) and @switch control what the template renders.
• Signals, computed() and effect() hold and react to state.
• Services with providedIn: 'root' are shared through inject(); the router maps URLs to components.