Angular 速查表

# install Angular CLI globally
npm install -g @angular/cli

# create a new project
ng new my-app --routing --style=scss
cd my-app

# serve the app (default: localhost:4200)
ng serve --open

# generate components, services, etc.
ng generate component components/user-profile
ng g service services/auth
ng g module modules/admin --routing

my-app/
├── src/
│   ├── app/                 # application code lives here
│   │   ├── app.component.ts
│   │   ├── app.component.html
│   │   └── app.config.ts    # standalone bootstrap config
│   ├── assets/              # static images, fonts
│   ├── environments/        # env-specific values
│   ├── index.html           # main HTML entry
│   ├── main.ts              # bootstrap entry point
│   └── styles.scss          # global styles
├── angular.json             # CLI workspace config
├── package.json
└── tsconfig.json

# dev server with live reload
ng serve --port 4300 --open

# production build (outputs to dist/)
ng build --configuration production

# analyze bundle size
ng build --stats-json
npx webpack-bundle-analyzer dist/my-app/stats.json

# run unit tests (Karma + Jasmine)
ng test

# run end-to-end tests
ng e2e

# generate a standalone component
ng g component user-profile --standalone

# generate a service with root provider
ng g service services/auth

# generate a guard (functional by default)
ng g guard guards/auth --functional

# generate a pipe, directive, or module
ng g pipe pipes/shorten
ng g directive directives/highlight
ng g module admin --routing --route admin --module app

# generate an interface or enum
ng g interface models/user
ng g enum models/role

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [{ "type": "initial", "maximumWarning": "500kb" }]
            }
          }
        }
      }
    }
  }
}

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  apiKey: 'dev-key'
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com',
  apiKey: 'prod-key'
};

// usage in a service
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private baseUrl = environment.apiUrl;
}

// user-profile.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
})
export class UserProfileComponent {
  @Input() name = 'Guest';
  @Input() age = 0;

  greet() {
    return `Hello, ${this.name}!`;
  }
}

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="decrement()">-</button>
    <span>{{ count }}</span>
    <button (click)="increment()">+</button>
  `,
  styles: [`
    :host { display: flex; gap: 8px; align-items: center; }
    button { padding: 4px 12px; }
  `],
})
export class CounterComponent {
  count = 0;
  increment() { this.count++; }
  decrement() { this.count--; }
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <input [(ngModel)]="query" placeholder="Search..." />
    <p>Searching for: {{ query }}</p>
  `,
})
export class SearchComponent {
  query = '';
}

@Component({
  selector: 'app-toggle',
  template: `
    <button (click)="toggle()">{{ label }}: {{ on ? 'On' : 'Off' }}</button>
  `,
})
export class ToggleComponent {
  @Input() label = 'Toggle';
  @Input() on = false;
  @Output() changed = new EventEmitter<boolean>();

  toggle() {
    this.on = !this.on;
    this.changed.emit(this.on);
  }
}

<!-- parent template -->
<app-toggle [label]="'Power'" [on]="isOn" (changed)="onToggle($event)" />

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

@Component({
  selector: 'app-card',
  template: `
    <div>{{ title() }} - {{ count() }}</div>
    <button (click)="clicked.emit()">Click</button>
  `,
})
export class CardComponent {
  // readonly signal inputs with defaults
  title = input<string>('Default');
  count = input<number>(0);

  // output() function replaces @Output
  clicked = output<void>();

  // computed derived from inputs
  // requires import { computed }
  // label = computed(() => this.title().toUpperCase());
}

@Component({
  selector: 'app-styles',
  template: `<p class="local">Emulated (default)</p>`,
  styles: [`p.local { color: red; }`],
  encapsulation: ViewEncapsulation.Emulated, // default
})
export class StylesComponent {}

// ViewEncapsulation.None    -> styles leak globally
// ViewEncapsulation.ShadowDom -> real Shadow DOM (strong isolation)
// ViewEncapsulation.Emulated -> scoped attributes (default, recommended)

<p>{{ title }}</p>                       <!-- renders the value -->
<p>{{ 1 + 2 }}</p>                        <!-- expressions allowed -->
<p>{{ user.name }}</p>                    <!-- property access -->
<p>{{ items.length }}</p>                 <!-- method/property -->
<p>{{ price | currency:'USD' }}</p>       <!-- pipe in interpolation -->
<p>{{ isReady ? 'Yes' : 'No' }}</p>       <!-- ternary -->

<!-- one-time interpolation updates when the source changes -->
<!-- new control flow @if, @for work without *ngIf/*ngFor directives -->

<!-- property binding: [prop]="expression" -->
<img [src]="user.avatar" [alt]="user.name" />
<button [disabled]="isSaving">Save</button>
<my-comp [data]="items"></my-comp>

<!-- attribute binding (for attrs without DOM props) -->
<td [attr.colspan]="2">Merged cell</td>
<svg [attr.viewBox]="box"></svg>

<!-- class & style binding -->
<div [class.active]="isActive">Active?</div>
<div [class]="dynamicClassString">
<div [style.color]="colorVar">
<div [style.width.px]="size">Width</div>

<button (click)="save()">Save</button>
<input (input)="onInput($event)" (keyup)="onKey($event)" />
<div (mouseenter)="hover=true" (mouseleave)="hover=false">Hover</div>

<!-- $event is the DOM event object -->
<input (keyup.enter)="submit()" (keyup.esc)="cancel()" />

<!-- passive events (scroll, touchmove) -->
<div (scroll.passive)="onScroll($event)">...</div>

<!-- binding to custom component outputs -->
<app-child (changed)="onChanged($event)"></app-child>

<input #nameInput type="text" />
<button (click)="nameInput.focus()">Focus</button>
<p>You typed: {{ nameInput.value }}</p>

<!-- ref to a component instance -->
<app-form #f="appForm"></app-form>
<button [disabled]="!f.valid" (click)="f.submit()">Submit</button>

<!-- ref inside @for -->
<ul>
  @for (item of items; track item.id) {
    <li>{{ item.name }} (index: {{ $index }})</li>
  }
</ul>

<!-- [()] = "banana in a box" - property + event combined -->
<input [(ngModel)]="username" />

<!-- equivalent to -->
<input [ngModel]="username" (ngModelChange)="username = $event" />

<!-- two-way binding on custom components -->
<app-counter [(value)]="count"></app-counter>
<!-- requires: @Input() value; @Output() valueChange = new EventEmitter() -->

<!-- signals: model() for two-way (v17.2+) -->
// value = model<number>(0);

<!-- safe navigation: short-circuits to undefined if null -->
<p>{{ user?.profile?.bio }}</p>
<p>{{ user?.getName?.() }}</p>

<!-- non-null assertion: tells compiler it's not null -->
<p>{{ user!.name }}</p>

<!-- in property bindings -->
<img [src]="user?.avatar" />
<app-detail [data]="user!"></app-detail>

<!-- safe navigation in @for doesn't replace track -->
@for (item of items ?? []; track item.id) { ... }

@if (user) {
  <p>Hello, {{ user.name }}</p>
} @else if (loading) {
  <p>Loading...</p>
} @else {
  <p>No user found.</p>
}

<!-- no structural directive import needed, no * prefix -->
<!-- works in standalone templates automatically (v17+) -->

<ul>
  @for (item of items; track item.id) {
    <li>{{ item.name }} ({{ $index }})</li>
  } @empty {
    <li>No items yet.</li>
  }
</ul>

<!-- 'track' is REQUIRED for performance -->
<!-- implicit vars: $index, $first, $last, $even, $odd, $count -->

<!-- @for over a range -->
@for (i of [1,2,3,4,5]; track i) {
  <span>{{ i }}</span>
}

<div [ngClass]="{ active: isActive, disabled: !enabled }">Box</div>
<div [ngClass]="['card', 'shadow', themeClass]">Card</div>
<div [ngClass]="currentClass">String</div>

<div [ngStyle]="{ color: textColor, 'font-size.px': size }">Text</div>
<div [ngStyle]="styleObject">Styled</div>

<!-- import CommonModule (or NgClass/NgStyle) for these -->
<!-- prefer [class.x] and [style.x] for single value bindings -->

@switch (status) {
  @case ('loading') {
    <spinner>Loading...</spinner>
  }
  @case ('error') {
    <p class="error">Something went wrong</p>
  }
  @case ('success') {
    <p>Done!</p>
  }
  @default {
    <p>Idle</p>
  }
}

import { Directive, ElementRef, Input, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  @Input('appHighlight') highlightColor = 'yellow';

  constructor(private el: ElementRef<HTMLElement>) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = '';
  }
}

<!-- usage: <p appHighlight="lightblue">Hover me</p> -->

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
  private hasView = false;

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.vc.createEmbeddedView(this.tpl);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.vc.clear();
      this.hasView = false;
    }
  }

  constructor(private tpl: TemplateRef<unknown>, private vc: ViewContainerRef) {}
}

<!-- usage: <div *appUnless="hide">Shown when hide is false</div> -->

<!-- date formatting -->
<p>{{ today | date }}</p>                          <!-- Sep 10, 2024 -->
<p>{{ today | date:'short' }}</p>
<p>{{ today | date:'yyyy-MM-dd HH:mm' }}</p>

<!-- number & currency -->
<p>{{ 3.14159 | number:'1.2-2' }}</p>               <!-- 3.14 -->
<p>{{ price | currency:'USD':'symbol':'1.2-2' }}</p>
<p>{{ ratio | percent }}</p>

<!-- text transforms -->
<p>{{ 'hello world' | uppercase }}</p>              <!-- HELLO WORLD -->
<p>{{ 'HELLO' | lowercase }}</p>
<p>{{ title | titlecase }}</p>
<p>{{ 'a/b/c' | slice:0:2 }}</p>

<!-- json (for debugging) -->
<pre>{{ obj | json }}</pre>

<!-- chain: left to right, output of one feeds the next -->
<p>{{ '  hello  ' | trim | uppercase }}</p>         <!-- HELLO -->
<p>{{ birthday | date:'fullDate' | uppercase }}</p>
<p>{{ items | slice:0:3 | json }}</p>

<!-- parameters separated by colons -->
<p>{{ amount | number:'1.2-2':'en-US' }}</p>
<p>{{ meeting | date:'shortTime' }}</p>
<p>{{ list | slice:1:5 }}</p>

<!-- multiple parameters -->
<p>{{ value | myPipe:arg1:arg2:arg3 }}</p>

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20, ellipsis = '...'): string {
    if (!value) return '';
    return value.length > limit
      ? value.slice(0, limit) + ellipsis
      : value;
  }
}

// register in a standalone component imports:
// imports: [TruncatePipe]

<!-- usage -->
<p>{{ longText | truncate:50 }}</p>
<p>{{ longText | truncate:10:'>>' }}</p>

@Component({
  selector: 'app-user',
  template: `
    <div *ngIf="user$ | async as user">
      {{ user.name }}
    </div>
    <ul>
      @for (item of items$ | async; track item.id) {
        <li>{{ item.name }}</li>
      }
    </ul>
  `,
  imports: [AsyncPipe, NgIf],
})
export class UserComponent {
  user$ = this.http.get<User>('/api/user');
  items$ = this.http.get<Item[]>('/api/items');

  constructor(private http: HttpClient) {}
}

// PURE (default): re-runs only when input reference changes
@Pipe({ name: 'filter' })
export class FilterPipe implements PipeTransform {
  transform(items: Item[], term: string): Item[] {
    return items.filter(i => i.name.includes(term));
  }
}
// Issue: mutating items.push() won't trigger re-evaluation.

// IMPURE: re-runs on every change detection cycle
@Pipe({ name: 'filter', pure: false })
export class ImpureFilterPipe implements PipeTransform { ... }
// ⚠️ Expensive! Use sparingly — affects performance.

// register locale data in app.config.ts
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

// provide a default locale
providers: [{ provide: LOCALE_ID, useValue: 'fr-FR' }]

// usage - now locale-aware
<p>{{ price | currency:'EUR' }}</p>          <!-- 1 234,56 € -->
<p>{{ today | date:'fullDate' }}</p>          <!-- lundi 10 septembre 2024 -->
<p>{{ number | number:'1.2-2' }}</p>          <!-- 1 234,56 -->
<p>{{ amount | currency:'JPY' }}</p>          <!-- ￥1,235 -->

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

@Injectable({ providedIn: 'root' })
export class UserService {
  private users = ['Alice', 'Bob'];

  getUsers() { return this.users; }
  addUser(name: string) { this.users.push(name); }
}

// usage in a component
export class UserListComponent {
  // Angular injects the singleton instance
  constructor(private users: UserService) {}

  get users() { return this.usersService.getUsers(); }
  private usersService = inject(UserService);
}

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

@Injectable({ providedIn: 'root' })
export class AuthService {
  private http = inject(HttpClient);
  private router = inject(Router);

  login(creds: Credentials) {
    return this.http.post('/api/login', creds);
  }
}

// in a component
export class DashboardComponent {
  private auth = inject(AuthService);
  user = this.auth.currentUser;   // works in field initializers
}

@Component({
  // ... provide at component level for instance-per-component
  providers: [
    UserService,                              // shorthand
    { provide: Logger, useClass: ConsoleLogger },
    { provide: API_URL, useValue: 'https://api.example.com' },
    { provide: Storage, useExisting: LocalStorageService },
    {
      provide: Config,
      useFactory: () => new Config(env.production)
    },
  ],
})
export class AdminComponent {}

// InjectionToken for non-class values
export const API_URL = new InjectionToken<string>('API_URL');

// root injector (singleton app-wide)
@Injectable({ providedIn: 'root' })
export class AuthService {}

// component-level provider: new instance for this component and children
@Component({
  providers: [UserService],   // each AdminComponent gets its own UserService
})
export class AdminComponent {}

// 'any' creates a lazy singleton per lazy module
@Injectable({ providedIn: 'any' })
export class SharedService {}

// 'platform' shared across all Angular apps on the page
@Injectable({ providedIn: 'platform' })
export class GlobalConfig {}

// define a token for a list of plugins
export const PLUGIN = new InjectionToken<Plugin>('PLUGIN');

// provide multiple plugins
@Component({
  providers: [
    { provide: PLUGIN, useClass: AuthPlugin, multi: true },
    { provide: PLUGIN, useClass: AnalyticsPlugin, multi: true },
  ],
})
export class AppComponent {}

// inject all of them as an array
export class PluginManager {
  plugins = inject(PLUGIN);   // Plugin[]
}

import { Injectable, inject, Optional, Inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class Logger {
  constructor(@Optional() @Inject(CONFIG) private cfg?: Config) {
    // cfg is null if no provider exists — handle gracefully
  }
}

// or with inject()
export class Service {
  cfg = inject(CONFIG, { optional: true });   // Config | null
  baseUrl = inject(API_URL, { optional: true }) ?? '/api';
}

// skipSelf: look in parent injectors only
// self: only this component's injector
// host: limit to host component

// app.routes.ts (standalone)
import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', component: HomeComponent, title: 'Home' },
  { path: 'about', loadComponent: () => import('./about/about.component')
      .then(m => m.AboutComponent) },
  { path: 'users/:id', component: UserDetailComponent },
  { path: 'admin', loadChildren: () => import('./admin/admin.routes')
      .then(m => m.ADMIN_ROUTES) },
  { path: '**', component: NotFoundComponent },   // wildcard
];

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

<!-- app.component.html -->
<nav>
  <a routerLink="/" routerLinkActive="active">Home</a>
  <a routerLink="/about" routerLinkActive="active">About</a>
  <a [routerLink]="['/users', userId]">My Profile</a>
</nav>

<router-outlet></router-outlet>

<!-- named outlet (secondary route) -->
<router-outlet name="popup"></router-outlet>

<!-- navigate programmatically -->
<button (click)="go()">Go</button>
// constructor(private router: Router) {}
// go() { this.router.navigate(['/users', 42]); }

// reading route params
export class UserDetailComponent {
  constructor(private route: ActivatedRoute) {
    // snapshot: one-time read (good for static links)
    const id = this.route.snapshot.paramMap.get('id');

    // observable: reacts to param changes (same component reused)
    this.route.paramMap.subscribe(params => {
      console.log(params.get('id'));
    });
  }
}

// query params: /search?q=angular&page=2
this.route.queryParamMap.subscribe(qp => {
  this.q = qp.get('q');
});

<!-- link with query params -->
<a [routerLink]="['/search']" [queryParams]="{ q: 'angular', page: 2 }">

export const routes: Routes = [
  {
    path: 'admin',
    component: AdminLayoutComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'users', component: AdminUsersComponent },
      { path: 'settings', component: SettingsComponent },
    ],
  },
];

<!-- AdminLayoutComponent template -->
<h2>Admin Panel</h2>
<nav>...</nav>
<router-outlet></router-outlet>   <!-- child routes render here -->

// main routes - load feature modules on demand
export const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
  },
  {
    path: 'reports',
    loadComponent: () => import('./reports/reports.component')
      .then(m => m.ReportsComponent),
  },
];

// admin.routes.ts
export const ADMIN_ROUTES: Routes = [
  { path: '', component: AdminComponent },
  { path: 'users', component: AdminUsersComponent },
];

// subscribe to router events
export class AppComponent implements OnDestroy {
  private sub = this.router.events.pipe(
    filter((e): e is NavigationEnd => e instanceof NavigationEnd)
  ).subscribe(e => {
    console.log('Navigated to:', e.url);
    this.analytics.track(e.url);
  });

  constructor(private router: Router) {}
  ngOnDestroy() { this.sub.unsubscribe(); }
}

// navigation with extras
this.router.navigate(['/users'], {
  queryParams: { sort: 'name' },
  fragment: 'top',
  state: { from: 'login' },   // passed to next route, not in URL
});

import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form #f="ngForm" (ngSubmit)="save(f.value)">
      <input name="email" [(ngModel)]="email" required email #e="ngModel" />
      <span *ngIf="e.invalid && e.touched">Email required</span>

      <input name="pwd" type="password" [(ngModel)]="pwd" required minlength="6" />
      <button [disabled]="f.invalid">Submit</button>
    </form>
  `,
})
export class LoginComponent {
  email = '';
  pwd = '';
  save(v: any) { console.log(v); }
}

import { ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-profile',
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="save()">
      <input formControlName="name" />
      <input formControlName="email" />
      <button [disabled]="form.invalid">Save</button>
    </form>
    <p>Valid: {{ form.valid }}</p>
  `,
})
export class ProfileComponent {
  form = new FormGroup({
    name: new FormControl('', { nonNullable: true }),
    email: new FormControl('', { nonNullable: true }),
  });
  save() { console.log(this.form.value); }
}

import { FormBuilder, FormGroup } from '@angular/forms';

export class CheckoutComponent {
  private fb = inject(FormBuilder);

  // typed form (v14+ nonNullable)
  form = this.fb.group({
    name: ['', { nonNullable: true }],
    address: this.fb.group({
      street: [''],
      city: [''],
      zip: [''],
    }),
    items: this.fb.array<CartItem>([]),
  });

  // type-safe access
  get items() { return this.form.controls.items; }
  addItem(item: CartItem) { this.items.push(this.fb.control(item)); }
}

import { Validators } from '@angular/forms';

// built-in validators
const email = new FormControl('', [
  Validators.required,
  Validators.email,
  Validators.maxLength(100),
]);

const password = new FormControl('', [
  Validators.required,
  Validators.minLength(8),
  Validators.pattern(/[A-Z]/),
]);

// cross-field validation at group level
const form = this.fb.group({
  pwd: ['', Validators.required],
  confirm: ['', Validators.required],
}, { validators: matchPassword });   // custom group validator

// reading state in template
<!-- <span *ngIf="email.touched && email.hasError('required')">Required</span> -->

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

// function validator
export const matchPassword: ValidatorFn = (group: AbstractControl): ValidationErrors | null => {
  const pwd = group.get('pwd')?.value;
  const confirm = group.get('confirm')?.value;
  return pwd === confirm ? null : { mismatch: true };
};

// async validator (returns Observable/Promise)
export function uniqueUsername(http: HttpClient): AsyncValidatorFn {
  return (control: AbstractControl) => {
    return timer(500).pipe(
      switchMap(() => http.get(`/api/check/${control.value}`)),
      map(exists => exists ? { taken: true } : null),
    );
  };
}

export class FilterComponent implements OnDestroy {
  private destroy = new Subject<void>();
  form = this.fb.group({ q: [''], category: ['all'] });

  ngOnInit() {
    // react to entire form changes (debounced)
    this.form.valueChanges.pipe(
      debounceTime(300),
      takeUntil(this.destroy),
    ).subscribe(v => this.search(v));

    // react to a single control
    this.form.controls.q.valueChanges.subscribe(q => {
      console.log('q changed:', q);
    });
  }

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

// app.config.ts
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()],
};

// usage in a service
@Injectable({ providedIn: 'root' })
export class PostService {
  private http = inject(HttpClient);
  private api = 'https://jsonplaceholder.typicode.com/posts';

  getPosts() {
    return this.http.get<Post[]>(this.api);
  }
}

// in a component (use async pipe to auto-unsubscribe)
export class PostListComponent {
  posts$ = this.posts.getPosts();
  constructor(private posts: PostService) {}
}

export class PostService {
  private http = inject(HttpClient);

  create(post: Omit<Post, 'id'>) {
    return this.http.post<Post>('/api/posts', post);
  }

  update(id: number, patch: Partial<Post>) {
    return this.http.put<Post>(`/api/posts/${id}`, patch);
  }

  remove(id: number) {
    return this.http.delete<void>(`/api/posts/${id}`);
  }
}

// all return Observables — subscribe or use async pipe
// HTTP methods return a single value then complete

export class SearchService {
  private http = inject(HttpClient);

  search(term: string, page = 1) {
    return this.http.get<Result[]>('/api/search', {
      params: { q: term, page, sort: 'desc' },
      headers: { 'X-Api-Key': 'secret' },
      observe: 'response',   // get full HttpResponse
      responseType: 'json',
    });
  }

  // observe: 'events' streams upload/download progress
  upload(file: File) {
    return this.http.post('/api/upload', file, {
      reportProgress: true,
      observe: 'events',
    });
  }
}

// functional interceptor (v15+)
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next(authReq);
};

// register in app.config.ts
providers: [provideHttpClient(withInterceptors([authInterceptor]))]

// error/logging interceptor
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request:', req.url);
  return next(req).pipe(tap({
    error: e => console.error('Failed:', req.url, e),
  }));
};

export class PostService {
  getPost(id: number) {
    return this.http.get<Post>(`/api/posts/${id}`).pipe(
      retry(2),                              // retry on failure
      timeout(5000),                         // abort after 5s
      catchError(err => {
        if (err.status === 404) return of(null);   // graceful fallback
        return throwError(() => new Error('Network error'));
      }),
    );
  }
}

// component-side
this.posts.getPost(1).subscribe({
  next: p => this.post = p,
  error: e => this.error = e.message,
  complete: () => this.loading = false,
});

// typed generic — response is typed, runtime NOT validated
this.http.get<User[]>('/api/users');

// full HttpResponse observation
this.http.get<User>('/api/users/1', { observe: 'response' })
  .subscribe(res => {
    console.log(res.status);   // 200
    console.log(res.headers.get('X-Total-Count'));
    console.log(res.body);     // User
  });

// opt into fetch() backend (v18+, recommended)
// provideHttpClient(withFetch())

// with XSRF protection enabled
// provideHttpClient(withXsrfConfiguration({ cookieName: 'XSRF-TOKEN' }))

import { Observable } from 'rxjs';

const obs = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  setTimeout(() => {
    subscriber.next(3);
    subscriber.complete();
  }, 1000);
});

const sub = obs.subscribe({
  next: v => console.log(v),
  error: e => console.error(e),
  complete: () => console.log('done'),
});

// cleanup
sub.unsubscribe();

// use of(...) for synchronous values
of(1, 2, 3).subscribe(v => console.log(v));
// from(iterable) for arrays/async iterables
from([1, 2, 3]).subscribe(console.log);

import { of, from, interval } from 'rxjs';
import { map, filter, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';

of(1, 2, 3, 4).pipe(
  map(x => x * 10),                          // 10, 20, 30, 40
  filter(x => x > 15),                       // 20, 30, 40
).subscribe(console.log);

// search input with debounce
input$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => http.get(`/api/search?q=${term}`)),
).subscribe(results => this.results = results);

import { combineLatest, forkJoin, merge, race, zip } from 'rxjs';

// combineLatest: emits when ANY source emits, after all have emitted
combineLatest([user$, settings$]).subscribe(([u, s]) => ...);

// forkJoin: waits for all to complete, emits last values (like Promise.all)
forkJoin({ user: user$, posts: posts$ }).subscribe(r => ...);

// merge: emits values from all sources as they come
merge(clicks$, keys$).subscribe(e => ...);

// zip: pairs emissions by index
zip(range(1, 3), ['a', 'b', 'c']).subscribe(([n, letter]) => ...);

// race: takes the first to emit, ignores the rest
race(primary$, fallback$).subscribe(v => ...);

import { Subject, BehaviorSubject, ReplaySubject } from 'rxjs';

// Subject: emits to current subscribers only
const click$ = new Subject<MouseEvent>();
click$.subscribe(x => console.log('A:', x));
click$.next({} as MouseEvent);   // A: logs it

// BehaviorSubject: keeps last value, new subs get it immediately
const count$ = new BehaviorSubject(0);
count$.subscribe(v => console.log(v));   // logs 0 immediately
count$.next(1);                          // logs 1 to subscribers

// ReplaySubject: replays last N values to new subscribers
const recent$ = new ReplaySubject<string>(2);
recent$.next('a'); recent$.next('b'); recent$.next('c');
recent$.subscribe(v => console.log(v));  // logs 'b', then 'c'

import { Subject, takeUntil, takeUntilDestroyed } from 'rxjs';

export class DemoComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.svc.stream$.pipe(
      takeUntil(this.destroy$),
    ).subscribe(data => this.data = data);
  }

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

// v16+: takeUntilDestroyed (uses DestroyRef, no boilerplate)
export class DemoComponent {
  data: any;
  constructor() {
    inject(SomeService).stream$.pipe(
      takeUntilDestroyed(),
    ).subscribe(d => this.data = d);
  }
}

import { from, interval } from 'rxjs';
import { switchMap, mergeMap, concatMap, exhaustMap } from 'rxjs/operators';

// switchMap: cancels the previous inner stream on new value
input$.pipe(switchMap(term => search(term)));
// Best for: typeahead search (discard stale results)

// mergeMap: runs all inner streams in parallel
ids$.pipe(mergeMap(id => fetchDetail(id)));
// Best for: parallel requests, order doesn't matter

// concatMap: queues inner streams, runs one at a time
queue$.pipe(concatMap(task => runTask(task)));
// Best for: ordered sequential operations

// exhaustMap: ignores new values while inner stream is active
save$.pipe(exhaustMap(() => saveForm()));
// Best for: prevent double-submit (ignore clicks while saving)

export class LifecycleComponent implements
    OnChanges, OnInit, DoCheck, AfterContentInit,
    AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  ngOnChanges()    { console.log('1. input changes'); }
  ngOnInit()       { console.log('2. component init (once)'); }
  ngDoCheck()      { console.log('3. custom change detection'); }
  ngAfterContentInit()      { console.log('4. projected content ready'); }
  ngAfterContentChecked()   { console.log('5. projected content checked'); }
  ngAfterViewInit()         { console.log('6. view (template) ready'); }
  ngAfterViewChecked()      { console.log('7. view checked'); }
  ngOnDestroy()    { console.log('8. cleanup before destroy'); }
}

export class ChartComponent implements OnInit, OnDestroy {
  private timer?: ReturnType<typeof setInterval>;

  ngOnInit() {
    // good for: data fetching, initialization, subscriptions
    this.timer = setInterval(() => this.refresh(), 5000);
    this.loadInitialData();
  }

  ngOnDestroy() {
    // cleanup: clear timers, unsubscribe, release resources
    if (this.timer) clearInterval(this.timer);
    // also: this.sub.unsubscribe();
  }

  private refresh() { /* ... */ }
  private loadInitialData() { /* ... */ }
}

export class PaginationComponent implements OnChanges {
  @Input() page = 1;
  @Input() total = 0;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['page'] && !changes['page'].firstChange) {
      // react only when page actually changed (not on init)
      console.log('page:', changes['page'].previousValue, '->', changes['page'].currentValue);
      this.fetchPage(this.page);
    }
  }

  private fetchPage(p: number) { /* ... */ }
}

export class CanvasComponent implements AfterViewInit {
  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;

  // ❌ canvasRef is undefined in ngOnInit
  ngOnInit() { /* this.canvasRef is undefined here */ }

  // ✅ available after view init
  ngAfterViewInit() {
    const canvas = this.canvasRef.nativeElement;
    const ctx = canvas.getContext('2d');
    ctx?.fillText('Hello', 10, 50);
  }
}

// template: <canvas #canvas></canvas>

export class ListComponent implements DoCheck {
  @Input() items: Item[] = [];
  private differ: IterableDiffer<Item>;

  constructor(differs: IterableDiffers) {
    this.differ = differs.find(items).create<Item>((i) => i.id);
  }

  ngDoCheck() {
    const changes = this.differ.diff(this.items);
    if (changes) {
      changes.forEachAddedItem(r => console.log('Added:', r.item));
      changes.forEachRemovedItem(r => console.log('Removed:', r.item));
    }
  }
}

export class CardComponent implements
    AfterContentInit, AfterViewInit, AfterContentChecked, AfterViewChecked {

  @ContentChild('header') headerTpl?: TemplateRef<unknown>;
  @ViewChild('body') bodyEl?: ElementRef<HTMLElement>;

  // projected content (<ng-content>) is ready
  ngAfterContentInit() {
    console.log('content ready:', this.headerTpl);
  }

  // own template view is ready
  ngAfterViewInit() {
    console.log('view ready:', this.bodyEl?.nativeElement);
  }

  // ContentChecked/ViewChecked run every CD cycle after init — beware perf
}

// card.component.ts
@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-content></ng-content>
    </div>
  `,
  styles: ['.card { border: 1px solid #ccc; padding: 16px; }'],
})
export class CardComponent {}

<!-- usage: anything inside projects into <ng-content> -->
<app-card>
  <h3>Title</h3>
  <p>Body content here.</p>
</app-card>

@Component({
  selector: 'app-layout',
  template: `
    <header><ng-content select="[header]"></ng-content></header>
    <main><ng-content></ng-content></main>
    <footer><ng-content select="footer"></ng-content></footer>
  `,
})
export class LayoutComponent {}

<!-- usage: select matches attributes, elements, classes -->
<app-layout>
  <nav header>Top nav</nav>
  <p>Main body</p>
  <footer>Bottom</footer>
</app-layout>

@Component({
  selector: 'app-tabs',
  template: `
    <div class="tabs">
      @for (t of tabs; track t) {
        <button (click)="active = t">{{ t.title }}</button>
      }
    </div>
    @for (t of tabs; track t) {
      @if (t === active) {
        <ng-container [ngTemplateOutlet]="t.template" />
      }
    }
  `,
})
export class TabsComponent {
  @ContentChildren(TabDirective) tabs!: QueryList<TabDirective>;
  active: any;
}

@Directive({ selector: 'tab' })
export class TabDirective {
  @Input() title = '';
  @Input() active = false;
  @ContentChild(TemplateRef) template!: TemplateRef<unknown>;
}

@Component({
  selector: 'app-tabset',
  template: `
    @for (tab of tabs; track tab) {
      <button (click)="select(tab)">{{ tab.title }}</button>
    }
    <ng-container *ngTemplateOutlet="activeTab?.template" />
  `,
})
export class TabsetComponent implements AfterContentInit {
  @ContentChildren(TabDirective) tabs!: QueryList<TabDirective>;
  activeTab?: TabDirective;

  ngAfterContentInit() {
    this.activeTab = this.tabs.find(t => t.active) ?? this.tabs.first;
  }
}

@Component({
  selector: 'app-list',
  template: `
    @for (item of items; track item.id) {
      <ng-container *ngTemplateOutlet="itemTpl; context: { $implicit: item, i: $index }" />
    }
    <ng-template #itemTpl let-item let-i="i">
      <li>{{ i }}: {{ item.name }}</li>
    </ng-template>
  `,
})
export class ListComponent {
  items = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
}

@Component({
  selector: 'app-modal',
  template: `
    <div class="modal">
      <ng-content select=".modal-header"></ng-content>
      <ng-content select="[body]"></ng-content>
      <ng-content select="app-modal-footer, footer"></ng-content>
      <!-- fallback for unmatched content -->
      <ng-content></ng-content>
    </div>
  `,
})

<!-- matches by class, attribute, element, or selector list -->
<app-modal>
  <div class="modal-header">Title</div>
  <section body>Body text</section>
  <app-modal-footer>OK</app-modal-footer>
  <p>This falls into the unselect'd slot.</p>
</app-modal>

import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService);
  const router = inject(Router);

  if (auth.isLoggedIn) return true;

  // redirect to login, preserving the attempted URL
  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url },
  });
};

// register in routes
{ path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] }

export const adminGuard: CanActivateChildFn = (route, state) => {
  const auth = inject(AuthService);

  if (!auth.isAdmin) {
    return inject(Router).parseUrl('/forbidden');
  }
  return true;
};

// applies to all children of this route
{
  path: 'admin',
  canActivateChild: [adminGuard],
  children: [
    { path: 'users', component: AdminUsersComponent },
    { path: 'settings', component: AdminSettingsComponent },
  ],
}

import { CanDeactivateFn } from '@angular/router';
import { inject } from '@angular/core';

export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

export const unsavedGuard: CanDeactivateFn<CanComponentDeactivate> = (component) => {
  return component?.canDeactivate() ?? true;
};

// component
export class EditComponent implements CanComponentDeactivate {
  canDeactivate() {
    if (this.form.dirty) return confirm('Discard changes?');
    return true;
  }
}

// route: { path: 'edit/:id', canDeactivate: [unsavedGuard] }

import { CanMatchFn } from '@angular/router';

export const paidFeatureGuard: CanMatchFn = (route, segments) => {
  const auth = inject(AuthService);
  // runs BEFORE the lazy chunk is even loaded
  if (auth.hasProPlan) return true;

  return inject(Router).createUrlTree(['/upgrade']);
};

// route configuration
{
  path: 'premium',
  canMatch: [paidFeatureGuard],
  loadComponent: () => import('./premium/premium.component'),
}

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';

export const userResolver: ResolveFn<User> = (route) => {
  const id = route.paramMap.get('id')!;
  return inject(UserService).getUser(+id).pipe(
    catchError(() => {
      inject(Router).navigate(['/users']);
      return EMPTY;
    }),
  );
};

// route
{ path: 'users/:id', resolve: { user: userResolver }, component: UserComponent }

// component reads pre-fetched data
export class UserComponent {
  user = this.route.snapshot.data['user'] as User;
  constructor(private route: ActivatedRoute) {}
}

// multiple guards run in declaration order, all must pass
{
  path: 'admin',
  canActivate: [authGuard, roleGuard],
  canMatch: [paidFeatureGuard],
  canDeactivate: [unsavedGuard],
  loadChildren: () => import('./admin/admin.routes'),
}

// guard returning Observable (async check)
export const roleGuard: CanActivateFn = () => {
  return inject(AuthService).hasRole('admin').pipe(
    map(ok => ok || inject(Router).parseUrl('/forbidden')),
  );
};

// ordering: canMatch → resolve → canActivate → canActivateChild

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';

export const postResolver: ResolveFn<Post> = (route, state) => {
  const id = Number(route.paramMap.get('id'));
  return inject(PostService).getPost(id);
};

// route
{
  path: 'posts/:id',
  resolve: { post: postResolver },
  component: PostDetailComponent,
}

// reading the resolved data
export class PostDetailComponent {
  post = this.route.snapshot.data['post'] as Post;
  constructor(private route: ActivatedRoute) {}

  // reactive: re-fetch when :id changes (same component reused)
  ngOnInit() {
    this.route.data.subscribe(d => this.post = d['post']);
  }
}

{
  path: 'dashboard',
  component: DashboardComponent,
  resolve: {
    user: userResolver,
    stats: statsResolver,
    notifications: notifResolver,
  },
}

// component
export class DashboardComponent {
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    const { user, stats, notifications } = this.route.snapshot.data;
    // all three resolved before component loads
  }
}

export const userResolver: ResolveFn<User | null> = (route) => {
  const id = route.paramMap.get('id')!;
  const router = inject(Router);
  const service = inject(UserService);

  return service.getUser(+id).pipe(
    catchError(err => {
      if (err.status === 404) {
        // redirect to a 'not found' page, cancel navigation
        router.navigate(['/404']);
        return EMPTY;
      }
      // re-throw other errors
      return throwError(() => err);
    }),
  );
};

// Approach A: Resolver (blocks navigation until data arrives)
// ✅ Component renders with data — no flicker
// ❌ Slower navigation feel, blocks route transition
{
  path: 'user/:id',
  resolve: { user: userResolver },
  component: UserComponent,
}

// Approach B: Fetch in ngOnInit (non-blocking)
// ✅ Snappy navigation, show loading skeleton
// ❌ Component must handle null/loading state
export class UserComponent implements OnInit {
  user?: User;
  loading = true;
  ngOnInit() {
    this.route.params.subscribe(p => {
      this.loading = true;
      this.svc.getUser(+p['id']).subscribe(u => {
        this.user = u;
        this.loading = false;
      });
    });
  }
}

// read query params inside a resolver
export const searchResolver: ResolveFn<SearchResult[]> = (route) => {
  const q = route.queryParamMap.get('q') ?? '';
  const page = Number(route.queryParamMap.get('page') ?? 1);
  return inject(SearchService).search(q, page);
};

// resolver feeding a signal-based component
export class SearchComponent {
  private route = inject(ActivatedRoute);
  results = signal<SearchResult[]>([]);

  constructor() {
    this.route.data.subscribe(d => this.results.set(d['results']));
  }
}

// app.config.ts
import { provideAnimations } from '@angular/platform-browser/animations';
export const appConfig: ApplicationConfig = {
  providers: [provideAnimations()],
};

// component
@Component({
  selector: 'app-fade',
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms ease-in', style({ opacity: 1 })),
      ]),
      transition(':leave', [
        animate('300ms ease-out', style({ opacity: 0 })),
      ]),
    ]),
  ],
  template: `<div *ngIf="show" @fadeIn>Hello</div>`,
})

@Component({
  selector: 'app-toggle',
  animations: [
    trigger('openClose', [
      state('open', style({ height: '*', opacity: 1 })),
      state('closed', style({ height: '0', opacity: 0 })),
      transition('open => closed', animate('200ms ease-out')),
      transition('closed => open', animate('300ms ease-in')),
      // bidirectional shortcut: 'open <=> closed'
    ]),
  ],
  template: `
    <button (click)="isOpen = !isOpen">Toggle</button>
    <div [@openClose]="isOpen ? 'open' : 'closed'">Panel</div>
  `,
})
export class ToggleComponent { isOpen = false; }

trigger('wiggle', [
  transition('* => *', [
    animate('600ms ease-in-out', keyframes([
      style({ transform: 'translateX(0)', offset: 0 }),
      style({ transform: 'translateX(-10px)', offset: 0.25 }),
      style({ transform: 'translateX(10px)', offset: 0.75 }),
      style({ transform: 'translateX(0)', offset: 1 }),
    ])),
  ]),
]),

// parallel/group animations
transition(':enter', [
  group([
    animate('300ms', style({ opacity: 1 })),
    animate('300ms', style({ transform: 'translateY(0)' })),
  ]),
]),

@Component({
  selector: 'app-list',
  animations: [
    trigger('itemAnim', [
      transition(':enter', [
        style({ height: 0, opacity: 0 }),
        animate('200ms', style({ height: '*', opacity: 1 })),
      ]),
      transition(':leave', [
        animate('200ms', style({ height: 0, opacity: 0 })),
      ]),
    ]),
  ],
  template: `
    @for (item of items; track item.id) {
      <div @itemAnim>{{ item.name }}</div>
    }
  `,
})
export class AnimListComponent { items = [...]; }

@Component({
  selector: 'app-root',
  animations: [
    trigger('routeAnim', [
      transition('* => *', [
        query(':enter', [
          style({ opacity: 0, position: 'absolute', width: '100%' }),
          animate('300ms', style({ opacity: 1 })),
        ], { optional: true }),
        query(':leave', [
          animate('300ms', style({ opacity: 0 })),
        ], { optional: true }),
      ]),
    ]),
  ],
  template: `
    <div [@routeAnim]="o.isActivated ? o.activatedRoute : ''">
      <router-outlet #o="outlet"></router-outlet>
    </div>
  `,
})

// respect prefers-reduced-motion
@Component({
  selector: 'app-safe-anim',
  animations: [
    trigger('fade', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('300ms', style({ opacity: 1 })),
      ]),
    ]),
  ],
  // or just use CSS — Angular animations add bundle weight
  template: `<div class="fade-in" @fade>Content</div>`,
  styles: [`
    @media (prefers-reduced-motion: reduce) {
      .fade-in { animation: none !important; transition: none !important; }
    }
  `],
})

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let fixture: ComponentFixture<MyComponent>;
  let component: MyComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MyComponent],   // standalone components are imported
    }).compileComponents();

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();   // runs initial change detection
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

describe('UserComponent', () => {
  let mockUserService = {
    getUsers: jasmine.createSpy().and.returnValue(of([...])),
    addUser: jasmine.createSpy().and.returnValue(of({})),
  };

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UserComponent],
      providers: [
        { provide: UserService, useValue: mockUserService },
      ],
    }).compileComponents();
  });

  it('loads users on init', () => {
    const fixture = TestBed.createComponent(UserComponent);
    fixture.detectChanges();
    expect(mockUserService.getUsers).toHaveBeenCalled();
    expect(fixture.componentInstance.users.length).toBe(2);
  });
});

import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
import { provideHttpClient } from '@angular/common/http';

describe('PostService', () => {
  let service: PostService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        PostService,
        provideHttpClient(),
        provideHttpClientTesting(),
      ],
    });
    service = TestBed.inject(PostService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('fetches posts', () => {
    service.getPosts().subscribe(posts => expect(posts.length).toBe(2));

    const req = httpMock.expectOne('/api/posts');
    expect(req.request.method).toBe('GET');
    req.flush([{ id: 1 }, { id: 2 }]);   // simulate response
    httpMock.verify();                    // no outstanding requests
  });
});

it('renders the title', () => {
  const fixture = TestBed.createComponent(MyComponent);
  fixture.componentInstance.title = 'Hello';
  fixture.detectChanges();
  const el: HTMLElement = fixture.nativeElement;
  expect(el.querySelector('h1')?.textContent).toContain('Hello');
});

it('calls save on button click', () => {
  const fixture = TestBed.createComponent(MyComponent);
  const spy = spyOn(fixture.componentInstance, 'save');
  const button = fixture.nativeElement.querySelector('button');
  button.click();
  expect(spy).toHaveBeenCalled();
});

// By.css for debug element queries (faster than nativeElement)
const debugEl = fixture.debugElement.query(By.css('.submit'));

describe('CounterComponent', () => {
  it('increments count', () => {
    const fixture = TestBed.createComponent(CounterComponent);
    const comp = fixture.componentInstance;

    expect(comp.count()).toBe(0);
    comp.increment();
    expect(comp.count()).toBe(1);

    // force signal effects to run in tests
    fixture.detectChanges();
  });

  it('renders count in template', () => {
    const fixture = TestBed.createComponent(CounterComponent);
    fixture.componentInstance.count.set(5);
    fixture.detectChanges();   // syncs signal to template
    expect(fixture.nativeElement.textContent).toContain('5');
  });
});

// cypress test (cypress/e2e/login.cy.ts)
describe('Login flow', () => {
  beforeEach(() => cy.visit('/login'));

  it('logs in with valid credentials', () => {
    cy.get('[data-cy=email]').type('[email protected]');
    cy.get('[data-cy=password]').type('secret123');
    cy.get('[data-cy=submit]').click();

    cy.url().should('include', '/dashboard');
    cy.contains('Welcome, User');
  });
});

// run with: npx cypress open  (interactive)
//           npx cypress run   (headless CI)

# add @angular/service-worker
ng add @angular/pwa --project my-app

# this generates:
# - ngsw-config.json (service worker config)
# - manifest.webmanifest
# - icons in src/assets/icons/
# - registers service worker in app.config.ts

# app.config.ts (auto-updated)
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideServiceWorker('ngsw-worker.js', {
      enabled: environment.production,
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
};

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/manifest.webmanifest", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": { "files": ["/assets/**", "/*.(svg|png|jpg|jpeg|webp|woff2)"] }
    }
  ],
  "dataGroups": [
    {
      "name": "api",
      "urls": ["https://api.example.com/**"],
      "cacheConfig": {
        "maxSize": 100, "maxAge": "1d", "timeout": "10s", "strategy": "freshness"
      }
    }
  ]
}

import { SwUpdate } from '@angular/service-worker';
import { inject } from '@angular/core';

export class UpdatePromptComponent {
  private updates = inject(SwUpdate);
  updateAvailable = false;

  constructor() {
    this.updates.versionUpdates.subscribe(evt => {
      if (evt.type === 'VERSION_READY') {
        this.updateAvailable = true;
      }
    });
  }

  applyUpdate() {
    this.updates.activateUpdate().then(() => document.location.reload());
  }
}

import { SwPush } from '@angular/service-worker';

export class NotificationComponent {
  private swPush = inject(SwPush);

  subscribeToPush() {
    this.swPush.requestSubscription({
      serverPublicKey: this.VAPID_PUBLIC,
    }).then(sub => this.sendToServer(sub))
      .catch(err => console.error('Push denied', err));
  }

  // check if SW is enabled
  ngOnInit() {
    if (!this.swPush.isEnabled) {
      console.warn('Push notifications not supported');
    }
  }
}

<!-- index.html (added by ng add @angular/pwa) -->
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="assets/icons/icon-152x152.png">

// manifest.webmanifest
{
  "name": "My App",
  "short_name": "MyApp",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    { "src": "assets/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "assets/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

// detect install prompt (Chrome)
let deferredPrompt: any;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  this.canInstall = true;   // show "Install App" button
});

// user-triggered install (must be from user gesture)
async installApp() {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  console.log('Install:', outcome);
  deferredPrompt = null;
}

// Lighthouse PWA checklist:
// ✅ served over HTTPS
// ✅ registers a service worker
// ✅ has a web manifest with icons
// ✅ start_url loads offline

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
  ],
};

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [
    CommonModule,          // *ngIf, *ngFor, pipes (or use built-in @if/@for)
    FormsModule,           // ngModel
    UserCardComponent,     // another standalone component
    HighlightDirective,    // standalone directive
    TruncatePipe,          // standalone pipe
  ],
  template: `
    <input [(ngModel)]="filter" />
    @for (u of users; track u.id) {
      <app-user-card [user]="u" appHighlight>{{ u.name | truncate:20 }}</app-user-card>
    }
  `,
})
export class UserListComponent { ... }

export const routes: Routes = [
  { path: '', loadComponent: () => import('./home/home.component')
      .then(m => m.HomeComponent) },
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component')
      .then(m => m.AdminComponent),
    canMatch: [authGuard],
  },
  {
    path: 'reports',
    loadChildren: () => import('./reports/reports.routes')
      .then(m => m.REPORTS_ROUTES),
  },
];

@Directive({
  selector: '[appHighlight]',
  standalone: true,
})
export class HighlightDirective { ... }

@Pipe({
  name: 'truncate',
  standalone: true,
})
export class TruncatePipe implements PipeTransform { ... }

// use directly in a standalone component's imports
@Component({
  imports: [HighlightDirective, TruncatePipe],
  template: `<p appHighlight>{{ text | truncate:10 }}</p>`,
})

# automatic migration (v15.2+)
ng generate @angular/core:standalone

# options:
# 1. Convert all components/directives/pipes to standalone
# 2. Remove unnecessary NgModule classes
# 3. Bootstrap the app using bootstrapApplication

// before: declared in a module
@NgModule({
  declarations: [OldComponent],
  imports: [CommonModule],
  exports: [OldComponent],
})
export class OldModule {}

// after: standalone component
@Component({
  standalone: true,
  imports: [CommonModule],
  // ...
})
export class OldComponent {}

// app.config.ts — global providers
export const appConfig: ApplicationConfig = {
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' },
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
    { provide: APP_INITIALIZER, multi: true, useFactory: () => initApp },
  ],
};

// component-level providers (scoped to this component and children)
@Component({
  providers: [
    { provide: UserService, useClass: MockUserService },
  ],
})
export class AdminComponent {}

// tree-shakable service
@Injectable({ providedIn: 'root' })  // preferred over providers array
export class AuthService {}

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

export class CounterComponent {
  // writable signal with initial value
  count = signal(0);
  user = signal<User | null>(null);

  // reading: call the signal as a function
  current = this.count();    // 0

  // writing
  increment() { this.count.update(v => v + 1); }
  setFive() { this.count.set(5); }

  // in templates, signals are called automatically in v17.2+
  // {{ count }} or {{ count() }} both work in templates
}

export class CartComponent {
  items = signal<Item[]>([]);
  taxRate = signal(0.08);

  // derived state — recomputes only when items or taxRate change
  subtotal = computed(() =>
    this.items().reduce((sum, i) => sum + i.price * i.qty, 0)
  );
  tax = computed(() => Math.round(this.subtotal() * this.taxRate() * 100) / 100);
  total = computed(() => this.subtotal() + this.tax());

  // computed signals are readonly and cached
  // they recompute lazily only when read AND a dependency changed
}

export class SearchComponent {
  query = signal('');
  results = signal<Result[]>([]);

  constructor() {
    // effect runs when its signal dependencies change
    effect(() => {
      const q = this.query();
      // ⚠️ avoid setting signals read in this effect (causes loops)
      this.search(q).then(r => this.results.set(r));
    });
  }

  // effect with cleanup
  private log = effect((onCleanup) => {
    const id = setInterval(() => console.log(this.count()), 1000);
    onCleanup(() => clearInterval(id));
  });
}

@Component({
  selector: 'app-todo',
  // signals work great with OnPush — automatic efficiency
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input (input)="text.set($any($event.target).value)" />
    <p>You typed: {{ text() }}</p>
    <p>Length: {{ length() }}</p>
    <button (click)="clear()">Clear</button>
  `,
})
export class TodoComponent {
  text = signal('');
  length = computed(() => this.text().length);
  clear() { this.text.set(''); }
}

import { input, output, viewChild, contentChild, model } from '@angular/core';

export class EditComponent {
  // signal input (readonly, v17.1+)
  id = input<number>(0);
  requiredName = input.required<string>();

  // signal output (v17.3+)
  saved = output<User>();

  // two-way signal (v17.2+)
  value = model<number>(0);   // creates input + output named valueChange

  // signal queries
  inputEl = viewChild<ElementRef>('input');      // in own template
  header = contentChild<TemplateRef>('header');  // projected content

  focus() { this.inputEl()?.nativeElement.focus(); }
}

import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class SearchComponent {
  private http = inject(HttpClient);

  // Observable → Signal (one-way)
  results = toSignal(this.http.get<Result[]>('/api/results'), {
    initialValue: [] as Result[],
  });

  // Signal → Observable (for RxJS operators)
  private query$ = toObservable(this.query);

  // combine the best of both worlds
  filtered = toSignal(
    this.query$.pipe(
      debounceTime(300),
      switchMap(q => this.http.get(`/api/search?q=${q}`)),
      takeUntilDestroyed(),
    ),
    { initialValue: [] as Result[] },
  );
}

@NgModule({
  declarations: [                  // components, directives, pipes owned by this module
    AppComponent,
    UserListComponent,
    HighlightDirective,
    TruncatePipe,
  ],
  imports: [                       // other modules whose exports this module needs
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  exports: [                       // what's visible to modules that import this module
    UserListComponent,
    TruncatePipe,
  ],
  providers: [],                   // services (use providedIn: 'root' instead)
  bootstrap: [AppComponent],       // only in the root module
})
export class AppModule {}

// shared.module.ts — reusable UI bits
@NgModule({
  imports: [CommonModule, FormsModule],
  declarations: [ButtonComponent, CardComponent, HighlightDirective],
  exports: [ButtonComponent, CardComponent, HighlightDirective, FormsModule],
})
export class SharedModule {}

// feature module (lazy-loaded)
@NgModule({
  declarations: [AdminComponent, AdminUsersComponent],
  imports: [CommonModule, RouterModule, SharedModule],
  exports: [AdminComponent],
})
export class AdminModule {
  static forChild(): ModuleWithProviders<AdminModule> {
    return { ngModule: AdminModule, providers: [AdminService] };
  }
}

// core.module.ts — app-wide singletons, imported once in AppModule
@NgModule({
  providers: [
    AuthService,
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
  ],
})
export class CoreModule {
  // guard against importing twice
  constructor(@Optional() @SkipSelf() parent?: CoreModule) {
    if (parent) throw new Error('CoreModule already loaded');
  }
}

// classic RouterModule pattern
@NgModule({ imports: [CommonModule], exports: [RouterModule] })
export class RouterModule {
  static forRoot(routes: Routes): ModuleWithProviders<RouterModule> {
    return {
      ngModule: RouterModule,
      providers: [provideRouter(routes)],
    };
  }
  static forChild(routes: Routes): ModuleWithProviders<RouterModule> {
    return { ngModule: RouterModule, providers: [provideRoutes(routes)] };
  }
}

// AppModule imports: RouterModule.forRoot(ROUTES)
// FeatureModule imports: RouterModule.forChild(FEATURE_ROUTES)

// modern equivalent: provideRouter(routes) in app.config.ts

// older API: entryComponents for dynamically created components
@NgModule({
  entryComponents: [DialogComponent, ModalComponent],
})
export class AppModule {}

// modern: ViewContainerRef.createComponent (no entryComponents needed)
export class DialogService {
  constructor(private vcr: ViewContainerRef) {}

  open() {
    const ref = this.vcr.createComponent(DialogComponent);
    ref.instance.title = 'Hello';
    ref.instance.close.subscribe(() => ref.destroy());
    return ref;
  }
}

// even simpler: NgComponentOutlet in template
<ng-container *ngComponentOutlet="dialogComponent; inputs: { title: 'Hi' }" />

// classic lazy module (pre-standalone)
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
  },
];

// admin-routing.module.ts
const routes: Routes = [
  { path: '', component: AdminComponent },
  { path: 'users', component: AdminUsersComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class AdminRoutingModule {}

// admin.module.ts
@NgModule({
  declarations: [AdminComponent, AdminUsersComponent],
  imports: [CommonModule, AdminRoutingModule],
})
export class AdminModule {}