Angular is a full framework for building web applications. It helps you build large, maintainable apps with a clear structure, routing, forms, HTTP, and strong tooling.
  
  ## What is Angular?
  
  Angular helps you:
  - Build UI using **components** (small reusable pieces)
  - Manage app screens using **routing**
  - Handle user input using **forms**
  - Call APIs using **HttpClient**
  - Keep code organized using **services** and **dependency injection**
  
  If React is a library for UI, Angular is a whole toolbox for building full apps in a consistent way.
  
  ## When Angular is a great choice
  
  Angular shines when:
  - You have a big app with many screens
  - Multiple developers work together (consistency matters)
  - You want a strong structure and best practices from day one
  - You want TypeScript-first development
  
  ## Angular mental model (quick picture)
  
  ```mermaid
  flowchart LR
    User((User)) --> UI[Components + Templates]
    UI --> State[Component State]
    UI --> Router[Router: pages]
    UI --> Services[Services: business logic]
    Services --> API[Backend API]
    Services --> Store[(Optional State Store)]
  ```
  
  ## Your first Angular “Hello”
  
  Angular components look like this:
  
  ```ts
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-hello',
    standalone: true,
    template: `<h1>Hello, Angular!</h1>`,
  })
  export class HelloComponent {}
  ```
  
  ## What you should learn first
  
  1) Components + Templates  
  2) Data binding (showing data, handling clicks)  
  3) Directives (`*ngIf`, `*ngFor`)  
  4) Services + HTTP  
  5) Routing  
  6) Forms (Template-driven, then Reactive)
  
  > Next: Install Angular CLI and create your first app.

Understand what Angular is, what problems it solves, and when you should (or should not) use it.

Angular Introduction

Let’s set up Angular the clean way using Angular CLI.
  
  ## Step 1: Install Node.js
  
  Angular needs Node.js. Install the latest LTS from nodejs.org.
  
  Check versions:
  
  ```bash
  node -v
  npm -v
  ```
  
  ## Step 2: Install Angular CLI
  
  ```bash
  npm install -g @angular/cli
  ng version
  ```
  
  ## Step 3: Create a new Angular app
  
  ```bash
  ng new my-angular-app
  cd my-angular-app
  ng serve -o
  ```
  
  - `ng serve` starts a local dev server
  - `-o` opens the browser automatically
  
  ## Common setup issues
  
  ### “ng is not recognized”
  Close and reopen your terminal, then try again.  
  If still not, reinstall Node.js LTS and retry CLI install.
  
  ### Port already in use
  ```bash
  ng serve --port 4300
  ```
  
  ## What you should see
  
  You’ll see the default Angular starter page, running on:
  
  ```
  http://localhost:4200
  ```
  
  > Next: Understand the project structure so you know where to code.

Step-by-step setup using Angular CLI, then run your first Angular app locally.

Install Angular and Create Your First App

When you open an Angular project, it can feel like “too many files.” Let’s make it simple.
  
  ## Key folders (the ones you actually use)
  
  ### `src/`
  This is where your app lives.
  
  - `src/main.ts` boots your app
  - `src/app/` contains your components, routes, services
  - `src/styles.css` global styles
  - `src/index.html` single HTML page (Angular renders inside it)
  
  ## App folder highlights
  
  Typical structure:
  
  ```
  src/app/
    app.component.ts
    app.component.html
    app.routes.ts
    core/
    shared/
    features/
  ```
  
  ### Recommended organization (professional, scalable)
  
  - `core/`: single-instance services (auth, api client, guards)
  - `shared/`: reusable components/pipes (buttons, cards)
  - `features/`: pages/modules by feature (billing, profile, admin)
  
  ## Where do I write code first?
  
  Start with:
  - `src/app/app.component.ts`
  - `src/app/app.component.html`
  
  If your project uses standalone components, you will also see routing in:
  - `src/app/app.routes.ts`
  
  > Next: Build your first component the right way.

Learn where everything lives in an Angular project so you can edit confidently.

Angular Project Structure Explained

Modern Angular supports **standalone components**, which means you can build apps without NgModules for most cases.
  
  ## What is a standalone component?
  
  A standalone component is a component that can be used directly without being declared inside a module.
  
  ## Example: Standalone component
  
  ```ts
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-greeting',
    standalone: true,
    template: `
      <h2>Welcome!</h2>
      <p>This is a standalone component.</p>
    `,
  })
  export class GreetingComponent {}
  ```
  
  ## Why it’s better for many teams
  
  - Fewer files and less “module wiring”
  - Easier to reuse components
  - Cleaner routing setup (especially for lazy loading)
  
  ## Importing dependencies (important)
  
  Standalone components use `imports`:
  
  ```ts
  import { CommonModule } from '@angular/common';
  
  @Component({
    selector: 'app-user',
    standalone: true,
    imports: [CommonModule],
    template: `
      <p *ngIf="isOnline">User is online</p>
    `,
  })
  export class UserComponent {
    isOnline = true;
  }
  ```
  
  > Next: Learn templates and interpolation (show data on screen).

Learn standalone components, the modern default style for Angular apps.

Standalone Components in Angular (Modern Angular)

Angular templates are just HTML with extra powers.
  
  ## Interpolation: show a variable in HTML
  
  In your component:
  
  ```ts
  export class ProfileComponent {
    firstName = 'Jason';
    points = 120;
  }
  ```
  
  In your template:
  
  ```html
  <h1>Hello {{ firstName }}!</h1>
  <p>You have {{ points }} points.</p>
  ```
  
  Angular replaces `{{ ... }}` with actual values.
  
  ## Interpolation rules (keep it clean)
  
  ✅ Good:
  - variables (`{{ points }}`)
  - simple expressions (`{{ points + 10 }}`)
  - safe checks (`{{ user?.name }}`)
  
  ❌ Avoid:
  - heavy logic in templates (loops, long conditions)
  - calling methods that run often and slow the UI
  
  ## Mini example (clean and readable)
  
  ```ts
  export class CartComponent {
    items = 3;
    price = 20;
  }
  ```
  
  ```html
  <p>Items: {{ items }}</p>
  <p>Total: ${{ items * price }}</p>
  ```
  
  > Next: Event binding and handling clicks like a real app.

Show data inside HTML using Angular templates and interpolation, the core of building UI.

Templates and Interpolation

Angular makes it easy to respond to user actions like clicking buttons or typing.
  
  ## Click event
  
  Template:
  
  ```html
  <button (click)="increase()">Increase</button>
  <p>Count: {{ count }}</p>
  ```
  
  Component:
  
  ```ts
  export class CounterComponent {
    count = 0;
  
    increase() {
      this.count++;
    }
  }
  ```
  
  ## Input event (typing)
  
  Template:
  
  ```html
  <input (input)="onTyping($event)" placeholder="Type your name" />
  <p>Hello {{ name }}</p>
  ```
  
  Component:
  
  ```ts
  export class NameComponent {
    name = '';
  
    onTyping(event: Event) {
      const input = event.target as HTMLInputElement;
      this.name = input.value;
    }
  }
  ```
  
  ## Pro tip: Keep templates simple
  
  If you need 10 lines of logic, put it in the component method, not inside HTML.
  
  > Next: Property binding (set attributes and values safely).

Handle clicks, typing, and events using Angular event binding with clear examples.

Event Binding: Click, Input, and User Actions

Property binding lets you set HTML properties using component data.
  
  ## Example: disable a button
  
  ```html
  <button [disabled]="isSaving">Save</button>
  ```
  
  ```ts
  export class SaveComponent {
    isSaving = true;
  }
  ```
  
  When `isSaving` is true, the button becomes disabled.
  
  ## Example: image src
  
  ```html
  <img [src]="avatarUrl" alt="Avatar" />
  ```
  
  ```ts
  export class AvatarComponent {
    avatarUrl = 'https://example.com/avatar.png';
  }
  ```
  
  ## Class binding (clean styling)
  
  ```html
  <p [class.active]="isActive">Status</p>
  ```
  
  ```ts
  export class StatusComponent {
    isActive = true;
  }
  ```
  
  > Next: Two-way binding with ngModel (simple forms quickly).

Learn how to bind values to HTML properties like src, disabled, and class.

Property Binding: Set HTML Attributes the Angular Way

Two-way binding keeps input and component state in sync.
  
  ## Step 1: Import FormsModule
  
  If you are using standalone components:
  
  ```ts
  import { Component } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  @Component({
    selector: 'app-name-form',
    standalone: true,
    imports: [FormsModule],
    templateUrl: './name-form.component.html',
  })
  export class NameFormComponent {
    name = '';
  }
  ```
  
  ## Step 2: Use [(ngModel)] in template
  
  ```html
  <input [(ngModel)]="name" placeholder="Type your name" />
  <p>You typed: {{ name }}</p>
  ```
  
  Now when the user types, `name` updates automatically.
  
  ## When to use ngModel
  
  Great for:
  - quick small forms
  - prototypes
  - simple settings pages
  
  For larger apps, you will love **Reactive Forms** (we cover that later).
  
  > Next: Structural directives like *ngIf and *ngFor.

Use [(ngModel)] for quick two-way binding, perfect for beginner-friendly inputs.

Two-Way Binding with ngModel

`*ngIf` is used when you want to show something only if a condition is true.
  
  ## Basic example
  
  ```html
  <p *ngIf="isLoggedIn">Welcome back!</p>
  <p *ngIf="!isLoggedIn">Please log in.</p>
  ```
  
  ```ts
  export class AuthBannerComponent {
    isLoggedIn = false;
  }
  ```
  
  ## Using else block (clean UI)
  
  ```html
  <div *ngIf="isLoggedIn; else guest">
    <h2>Dashboard</h2>
  </div>
  
  <ng-template #guest>
    <h2>Home Page</h2>
    <p>Sign in to continue.</p>
  </ng-template>
  ```
  
  ## Tip
  
  Use `*ngIf` to remove elements from the DOM entirely, not just hide them with CSS.
  
  > Next: *ngFor to render lists like a real app.

Show or hide elements based on conditions using *ngIf with beginner-friendly examples.

Structural Directives: *ngIf (Show or Hide UI)

`*ngFor` renders an element for each item in an array.
  
  ## Basic list rendering
  
  ```html
  <ul>
    <li *ngFor="let skill of skills">{{ skill }}</li>
  </ul>
  ```
  
  ```ts
  export class SkillsComponent {
    skills = ['HTML', 'CSS', 'TypeScript', 'Angular'];
  }
  ```
  
  ## Getting index
  
  ```html
  <li *ngFor="let skill of skills; let i = index">
    {{ i + 1 }}. {{ skill }}
  </li>
  ```
  
  ## trackBy (important for performance)
  
  If your list updates often, trackBy helps Angular avoid re-rendering everything.
  
  ```html
  <li *ngFor="let user of users; trackBy: trackById">
    {{ user.name }}
  </li>
  ```
  
  ```ts
  export class UsersComponent {
    users = [
      { id: 1, name: 'Emma' },
      { id: 2, name: 'David' },
    ];
  
    trackById(_: number, item: { id: number }) {
      return item.id;
    }
  }
  ```
  
  > Next: Attribute directives like [ngClass] and [ngStyle].

Loop through arrays and display lists using *ngFor, plus trackBy for performance.

Structural Directives: *ngFor (Render Lists)

Angular styling is clean when you bind classes or style objects instead of building strings manually.
  
  ## ngClass (most common)
  
  ```html
  <div [ngClass]="{ online: isOnline, offline: !isOnline }">
    Status: {{ isOnline ? 'Online' : 'Offline' }}
  </div>
  ```
  
  ```ts
  export class StatusBadgeComponent {
    isOnline = true;
  }
  ```
  
  ## ngStyle (dynamic inline styles)
  
  ```html
  <p [ngStyle]="{ fontSize: fontSize + 'px' }">
    Adjustable text
  </p>
  ```
  
  ```ts
  export class FontDemoComponent {
    fontSize = 18;
  }
  ```
  
  ## Best practice
  
  - Use CSS classes for most styling
  - Use ngStyle only when you truly need dynamic values
  
  > Next: Pipes, formatting data like dates and currency.

Apply dynamic styles and classes based on state using ngClass and ngStyle.

Styling in Angular with ngClass and ngStyle

Pipes format data directly in the template, keeping your component code cleaner.
  
  ## Common built-in pipes
  
  ### Date pipe
  ```html
  <p>Joined: {{ joinedAt | date:'mediumDate' }}</p>
  ```
  
  ### Currency pipe
  ```html
  <p>Total: {{ total | currency:'USD' }}</p>
  ```
  
  ### Titlecase pipe
  ```html
  <p>{{ fullName | titlecase }}</p>
  ```
  
  ## Example component
  
  ```ts
  export class OrderSummaryComponent {
    joinedAt = new Date('2025-01-01');
    total = 129.99;
    fullName = 'jessica taylor';
  }
  ```
  
  ## Why pipes are a big deal
  
  Without pipes, you might write formatting code everywhere. Pipes keep templates readable and consistent.
  
  > Next: Create your own custom pipe (useful in real products).

Use pipes to format values in templates without writing extra code in components.

Angular Pipes: Format Data (Date, Currency, Titlecase)

Custom pipes let you create your own formatting logic, reusable across the app.
  
  ## Example goal: 1200 -> 1.2K
  
  ### Step 1: Create a pipe
  
  ```ts
  import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'shortNumber',
    standalone: true,
  })
  export class ShortNumberPipe implements PipeTransform {
    transform(value: number): string {
      if (value >= 1_000_000) return (value / 1_000_000).toFixed(1) + 'M';
      if (value >= 1_000) return (value / 1_000).toFixed(1) + 'K';
      return String(value);
    }
  }
  ```
  
  ### Step 2: Use it in a standalone component
  
  ```ts
  import { Component } from '@angular/core';
  import { ShortNumberPipe } from './short-number.pipe';
  
  @Component({
    selector: 'app-stats',
    standalone: true,
    imports: [ShortNumberPipe],
    template: `<p>Views: {{ views | shortNumber }}</p>`,
  })
  export class StatsComponent {
    views = 15230;
  }
  ```
  
  Result:
  ```
  Views: 15.2K
  ```
  
  > Next: Components communication, passing data with @Input.

Create a custom pipe for real-world formatting, like abbreviating large numbers.

Custom Pipes: Build Your Own Formatter

Real apps are built by combining components. To pass data from a parent to a child, Angular uses `@Input`.
  
  ## Step 1: Create a child component
  
  ```ts
  import { Component, Input } from '@angular/core';
  
  @Component({
    selector: 'app-user-card',
    standalone: true,
    template: `
      <div class="card">
        <h3>{{ name }}</h3>
        <p>Role: {{ role }}</p>
      </div>
    `,
  })
  export class UserCardComponent {
    @Input() name = '';
    @Input() role = '';
  }
  ```
  
  ## Step 2: Use it in a parent component
  
  ```html
  <app-user-card [name]="userName" [role]="userRole"></app-user-card>
  ```
  
  ```ts
  export class UsersPageComponent {
    userName = 'Amanda Scott';
    userRole = 'Frontend Developer';
  }
  ```
  
  ## Best practice
  
  - Use clear input names
  - Provide default values
  - Keep child components “dumb” and reusable when possible
  
  > Next: Send events from child to parent using @Output.

Pass data from parent to child components using @Input the professional way.

Component Communication with @Input

Use `@Output` when a child needs to notify its parent, like “button clicked” or “user selected.”
  
  ## Step 1: Child component emits event
  
  ```ts
  import { Component, EventEmitter, Output } from '@angular/core';
  
  @Component({
    selector: 'app-like-button',
    standalone: true,
    template: `<button (click)="like()">👍 Like</button>`,
  })
  export class LikeButtonComponent {
    @Output() liked = new EventEmitter<number>();
    private count = 0;
  
    like() {
      this.count++;
      this.liked.emit(this.count);
    }
  }
  ```
  
  ## Step 2: Parent listens to event
  
  ```html
  <app-like-button (liked)="onLiked($event)"></app-like-button>
  <p>Total likes: {{ likes }}</p>
  ```
  
  ```ts
  export class PostComponent {
    likes = 0;
  
    onLiked(newCount: number) {
      this.likes = newCount;
    }
  }
  ```
  
  ## Mental model
  
  Parent passes data down with `@Input`.  
  Child sends events up with `@Output`.
  
  > Next: Services and dependency injection, the real backbone of Angular apps.

Send actions and data back to a parent component using EventEmitter and @Output.

Component Communication with @Output (Child to Parent)

In professional apps, you do not put all logic inside components. Components should focus on UI. Services handle data and business logic.
  
  ## Example: a simple user service
  
  ```ts
  import { Injectable } from '@angular/core';
  
  @Injectable({ providedIn: 'root' })
  export class UserService {
    getUserName() {
      return 'Christopher Evans';
    }
  }
  ```
  
  ## Use it inside a component
  
  ```ts
  import { Component } from '@angular/core';
  import { UserService } from './user.service';
  
  @Component({
    selector: 'app-header',
    standalone: true,
    template: `<h1>Hi, {{ name }}</h1>`,
  })
  export class HeaderComponent {
    name = '';
  
    constructor(private userService: UserService) {
      this.name = this.userService.getUserName();
    }
  }
  ```
  
  ## Why this matters
  
  If you keep logic in services:
  - components stay small and readable
  - logic becomes reusable
  - testing is easier
  
  > Next: Dependency Injection explained, so services feel natural (not magic).

Learn why services exist, where to put logic, and how to use them cleanly.

Services in Angular: Reusable Business Logic

Dependency Injection sounds scary, but it is just a clean way of giving your class the tools it needs.
  
  ## Real-world example
  
  Instead of a component creating its own service:
  - it would be stuck with one implementation
  - harder to test
  - harder to swap later
  
  With DI, Angular creates the service and gives it to your component.
  
  ## DI flow (picture)
  
  ```mermaid
  flowchart TD
    A[Angular Injector] --> B[Create UserService once]
    B --> C[Inject into HeaderComponent]
    B --> D[Inject into ProfileComponent]
  ```
  
  ## Providers in modern Angular
  
  Most services use:
  `@Injectable({ providedIn: 'root' })`
  
  That means:
  - Angular creates one shared instance
  - available everywhere
  
  ## Advanced idea (quick mention)
  
  You can provide a service at a component level (new instance per component tree) but start with `root` until you have a reason.
  
  > Next: Routing, creating pages and navigation.

Understand what DI is, why Angular uses it, and how providers work in modern Angular.

Dependency Injection (DI) Explained Simply

Routing is how Angular switches between pages without reloading the browser.
  
  ## Step 1: Create two components
  
  - HomeComponent
  - AboutComponent
  
  ## Step 2: Add routes (standalone routing)
  
  ```ts
  import { Routes } from '@angular/router';
  import { HomeComponent } from './home.component';
  import { AboutComponent } from './about.component';
  
  export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
  ];
  ```
  
  ## Step 3: Add router outlet
  
  ```html
  <nav>
    <a routerLink="/">Home</a>
    <a routerLink="/about">About</a>
  </nav>
  
  <router-outlet></router-outlet>
  ```
  
  ## How routing works (quick graph)
  
  ```mermaid
  flowchart LR
    URL[Browser URL] --> Router[Angular Router]
    Router --> Outlet[router-outlet]
    Outlet --> Page[Component Page]
  ```
  
  > Next: Route parameters, dynamic pages like /products/42.

Create multiple pages in Angular using the Router, including links and router-outlet.

Angular Routing Basics: Pages and Navigation

Dynamic routes let you build pages like:
  - `/users/10`
  - `/products/42`
  
  ## Step 1: Define a route with a param
  
  ```ts
  { path: 'users/:id', component: UserDetailsComponent }
  ```
  
  ## Step 2: Read param in the component
  
  ```ts
  import { Component } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-user-details',
    standalone: true,
    template: `<h2>User ID: {{ userId }}</h2>`,
  })
  export class UserDetailsComponent {
    userId = '';
  
    constructor(private route: ActivatedRoute) {
      this.userId = this.route.snapshot.paramMap.get('id') ?? '';
    }
  }
  ```
  
  ## Better: subscribe for changes
  
  If user navigates from `/users/10` to `/users/11` without destroying component:
  
  ```ts
  this.route.paramMap.subscribe(params => {
    this.userId = params.get('id') ?? '';
  });
  ```
  
  > Next: Query parameters like ?tab=posts and ?sort=asc.

Create dynamic routes like /users/:id and read params safely in Angular.

Route Parameters: Build Dynamic Pages

Query params are those extra values in the URL after `?`.
  
  Example:
  `/search?q=angular&page=2`
  
  ## Read query params
  
  ```ts
  import { ActivatedRoute } from '@angular/router';
  
  export class SearchComponent {
    query = '';
    page = 1;
  
    constructor(private route: ActivatedRoute) {
      this.route.queryParamMap.subscribe(params => {
        this.query = params.get('q') ?? '';
        this.page = Number(params.get('page') ?? '1');
      });
    }
  }
  ```
  
  ## Set query params from a link
  
  ```html
  <a [routerLink]="['/search']" [queryParams]="{ q: 'angular', page: 1 }">
    Search Angular
  </a>
  ```
  
  > Next: Route guards, protecting pages like /dashboard.

Use query params for filters and tabs, like /search?q=angular&page=2.

Query Parameters in Angular

Guards decide whether navigation is allowed. This is how you protect routes like `/dashboard`.
  
  ## Example: simple auth guard (functional guard style)
  
  ```ts
  import { CanActivateFn, Router } from '@angular/router';
  import { inject } from '@angular/core';
  
  export const authGuard: CanActivateFn = () => {
    const router = inject(Router);
    const isLoggedIn = localStorage.getItem('token');
  
    if (isLoggedIn) return true;
  
    router.navigate(['/login']);
    return false;
  };
  ```
  
  ## Use it in a route
  
  ```ts
  { path: 'dashboard', loadComponent: () => import('./dashboard.component').then(m => m.DashboardComponent), canActivate: [authGuard] }
  ```
  
  ## Best practice note
  
  Guards are for navigation control. You still must enforce security on the backend too.
  
  > Next: Lazy loading to speed up big apps.

Use guards to block access to routes unless a user is authenticated or has a role.

Route Guards: Protect Pages Like a Pro

Lazy loading means you do not ship the whole app upfront. You load a feature only when the user visits it.
  
  ## Example: Lazy-load a component route
  
  ```ts
  {
    path: 'admin',
    loadComponent: () =>
      import('./admin/admin.component').then(m => m.AdminComponent)
  }
  ```
  
  ## Why it helps
  
  - smaller initial bundle
  - faster first load
  - better performance on mobile networks
  
  ## Visual: eager vs lazy
  
  ```mermaid
  flowchart LR
    A[App Load] --> B1[Eager: Load Everything]
    A --> B2[Lazy: Load Home Only]
    B2 --> C[User Visits /admin]
    C --> D[Load Admin Feature]
  ```
  
  > Next: HTTP requests, calling APIs with HttpClient.

Load feature pages only when needed to improve performance, especially for big websites.

Lazy Loading Routes for Faster Angular Apps

Most real Angular apps talk to a backend. Angular uses `HttpClient` for API calls.
  
  ## Step 1: Provide HttpClient
  
  In modern Angular, use:
  
  ```ts
  import { provideHttpClient } from '@angular/common/http';
  
  bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
  });
  ```
  
  ## Step 2: Create an API service
  
  ```ts
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  export type Product = { id: number; title: string; price: number };
  
  @Injectable({ providedIn: 'root' })
  export class ProductsApi {
    constructor(private http: HttpClient) {}
  
    getProducts(): Observable<Product[]> {
      return this.http.get<Product[]>('/api/products');
    }
  }
  ```
  
  ## Step 3: Use it in a component
  
  ```ts
  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ProductsApi, Product } from './products.api';
  
  @Component({
    selector: 'app-products',
    standalone: true,
    imports: [CommonModule],
    template: `
      <h2>Products</h2>
      <ul>
        <li *ngFor="let p of products">{{ p.title }} - ${{ p.price }}</li>
      </ul>
    `,
  })
  export class ProductsComponent {
    products: Product[] = [];
  
    constructor(private api: ProductsApi) {
      this.api.getProducts().subscribe(data => (this.products = data));
    }
  }
  ```
  
  > Next: Observables explained, because HttpClient returns Observables.

Fetch data from a backend using HttpClient with a clean service-based approach.

HTTP in Angular: GET Data from an API

Angular uses Observables everywhere (HTTP, Router, Forms). Think of an Observable like a stream of values over time.
  
  ## Simple mental model
  
  - A Promise gives you one value later.
  - An Observable can give you many values over time.
  
  ## Observable stream picture
  
  ```mermaid
  flowchart LR
    A[Observable] --> B[Value 1]
    A --> C[Value 2]
    A --> D[Value 3]
  ```
  
  ## Example: interval stream
  
  ```ts
  import { interval } from 'rxjs';
  
  interval(1000).subscribe(n => {
    console.log('Tick:', n);
  });
  ```
  
  This logs a number every second.
  
  ## Why Angular likes Observables
  
  - cancelable (unsubscribe)
  - supports streaming updates
  - powerful operators (map, filter, switchMap)
  
  ## Important: unsubscribe (basic rule)
  
  If you subscribe to long-lived streams, clean up in `ngOnDestroy`.  
  HTTP calls complete automatically, so they usually do not need manual unsubscribe.
  
  > Next: Use async pipe to avoid manual subscribe and unsubscribe.

Understand Observables with simple examples so RxJS feels practical, not confusing.

Observables Explained for Angular Beginners

The async pipe is one of the best Angular features. It subscribes for you and cleans up automatically.
  
  ## Example: products$ with async
  
  Component:
  
  ```ts
  import { Component } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { Observable } from 'rxjs';
  import { ProductsApi, Product } from './products.api';
  
  @Component({
    selector: 'app-products',
    standalone: true,
    imports: [CommonModule],
    templateUrl: './products.component.html',
  })
  export class ProductsComponent {
    products$: Observable<Product[]>;
  
    constructor(api: ProductsApi) {
      this.products$ = api.getProducts();
    }
  }
  ```
  
  Template:
  
  ```html
  <ul>
    <li *ngFor="let p of (products$ | async)">
      {{ p.title }} - ${{ p.price }}
    </li>
  </ul>
  ```
  
  ## Why it’s better
  
  - no manual `subscribe`
  - no manual `unsubscribe`
  - templates stay readable
  
  > Next: Lifecycle hooks, understanding when Angular runs your code.

Use the async pipe to display Observable data without manual subscriptions.

Async Pipe: Cleaner Observables in Templates

Lifecycle hooks are methods Angular calls at different stages of a component’s life.
  
  ## The ones you will use most
  
  ### ngOnInit
  Runs once after the component is created.
  Good for:
  - loading initial data
  - starting subscriptions
  
  ### ngOnDestroy
  Runs once before the component is removed.
  Good for:
  - cleaning subscriptions
  - stopping timers
  
  ## Example
  
  ```ts
  import { Component, OnDestroy, OnInit } from '@angular/core';
  import { Subscription, interval } from 'rxjs';
  
  @Component({
    selector: 'app-timer',
    standalone: true,
    template: `<p>Seconds: {{ seconds }}</p>`,
  })
  export class TimerComponent implements OnInit, OnDestroy {
    seconds = 0;
    private sub?: Subscription;
  
    ngOnInit() {
      this.sub = interval(1000).subscribe(() => this.seconds++);
    }
  
    ngOnDestroy() {
      this.sub?.unsubscribe();
    }
  }
  ```
  
  ## Quick tip
  
  - HTTP Observables complete automatically, usually safe.
  - Streams like `interval`, router events, websockets need cleanup.
  
  > Next: Template-driven forms, building real input screens.

Learn the lifecycle hooks that control setup, updates, and cleanup in Angular components.

Angular Lifecycle Hooks (ngOnInit, ngOnDestroy, and More)

Template-driven forms are easy to start with and great for simple forms.
  
  ## Step 1: Import FormsModule
  
  Standalone component:
  
  ```ts
  import { Component } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  @Component({
    selector: 'app-contact',
    standalone: true,
    imports: [FormsModule],
    templateUrl: './contact.component.html',
  })
  export class ContactComponent {
    model = {
      name: '',
      email: '',
      message: '',
    };
  
    submit() {
      alert('Submitted: ' + JSON.stringify(this.model));
    }
  }
  ```
  
  ## Step 2: Template form
  
  ```html
  <form (ngSubmit)="submit()">
    <label>Name</label>
    <input name="name" [(ngModel)]="model.name" required />
  
    <label>Email</label>
    <input name="email" [(ngModel)]="model.email" required email />
  
    <label>Message</label>
    <textarea name="message" [(ngModel)]="model.message" required></textarea>
  
    <button type="submit">Send</button>
  </form>
  ```
  
  ## What’s happening
  
  - `[(ngModel)]` keeps values synced
  - `required` enables basic validation
  - `(ngSubmit)` runs when the form submits
  
  > Next: Reactive Forms, the best choice for bigger apps.

Create a simple form using ngModel, validation, and submit handling.

Template-Driven Forms: Build a Contact Form

Reactive Forms give you full control in TypeScript and are easier to scale and test.
  
  ## Step 1: Import ReactiveFormsModule
  
  ```ts
  import { Component } from '@angular/core';
  import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-signup',
    standalone: true,
    imports: [ReactiveFormsModule],
    templateUrl: './signup.component.html',
  })
  export class SignupComponent {
    form = new FormGroup({
      name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
      email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }),
    });
  
    submit() {
      if (this.form.invalid) return;
      console.log('Form value:', this.form.value);
    }
  }
  ```
  
  ## Step 2: Template
  
  ```html
  <form [formGroup]="form" (ngSubmit)="submit()">
    <label>Name</label>
    <input formControlName="name" />
    <div *ngIf="form.controls.name.touched && form.controls.name.invalid">
      Name is required.
    </div>
  
    <label>Email</label>
    <input formControlName="email" />
    <div *ngIf="form.controls.email.touched && form.controls.email.invalid">
      Enter a valid email.
    </div>
  
    <button type="submit" [disabled]="form.invalid">Create Account</button>
  </form>
  ```
  
  ## Why teams love Reactive Forms
  
  - validation rules live in TypeScript
  - easier to reuse patterns across forms
  - better for complex and dynamic form fields
  
  > Next: HTTP POST, sending form data to a backend.

Build scalable forms using FormGroup and FormControl with clear step-by-step setup.

Reactive Forms: The Professional Way to Build Forms

Posting data is how you create users, save forms, submit orders, and more.
  
  ## Create an API method
  
  ```ts
  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  export type CreateUserRequest = { name: string; email: string };
  export type CreateUserResponse = { id: string };
  
  @Injectable({ providedIn: 'root' })
  export class UsersApi {
    constructor(private http: HttpClient) {}
  
    createUser(payload: CreateUserRequest): Observable<CreateUserResponse> {
      return this.http.post<CreateUserResponse>('/api/users', payload);
    }
  }
  ```
  
  ## Use it on submit
  
  ```ts
  submit() {
    if (this.form.invalid) return;
  
    const payload = {
      name: this.form.controls.name.value,
      email: this.form.controls.email.value,
    };
  
    this.api.createUser(payload).subscribe({
      next: res => console.log('Created user:', res.id),
      error: err => console.error('Create failed:', err),
    });
  }
  ```
  
  ## Pro tip
  
  Keep API calls inside services, not directly in templates.
  
  > Next: HTTP interceptors for auth tokens and logging.

Send data to APIs using HttpClient.post with clean error handling patterns.

HTTP POST: Send Data to the Backend

Interceptors run for every HTTP request, which is perfect for:
  - attaching auth tokens
  - handling 401 errors
  - logging and measuring performance
  
  ## Example: attach Authorization header
  
  ```ts
  import { HttpInterceptorFn } from '@angular/common/http';
  
  export const authInterceptor: HttpInterceptorFn = (req, next) => {
    const token = localStorage.getItem('token');
  
    if (!token) return next(req);
  
    const authReq = req.clone({
      setHeaders: {
        Authorization: `Bearer ${token}`,
      },
    });
  
    return next(authReq);
  };
  ```
  
  ## Provide it
  
  ```ts
  import { provideHttpClient, withInterceptors } from '@angular/common/http';
  
  bootstrapApplication(AppComponent, {
    providers: [
      provideHttpClient(withInterceptors([authInterceptor])),
    ],
  });
  ```
  
  ## Why it’s important
  
  Without interceptors, you repeat token logic in every API call. Interceptors centralize it.
  
  > Next: RxJS operators, make API flows cleaner with map and switchMap.

Use interceptors to attach JWT tokens, handle errors, and keep HTTP code clean.

HTTP Interceptors: Add Auth Tokens Automatically

RxJS operators help you transform and control data streams.
  
  ## map: transform values
  
  ```ts
  import { of, map } from 'rxjs';
  
  of(2, 3, 4).pipe(
    map(x => x * 10)
  ).subscribe(console.log);
  // 20, 30, 40
  ```
  
  ## filter: keep only what matches
  
  ```ts
  import { of, filter } from 'rxjs';
  
  of(1, 2, 3, 4).pipe(
    filter(x => x % 2 === 0)
  ).subscribe(console.log);
  // 2, 4
  ```
  
  ## switchMap: best for “dependent requests”
  
  Example: user changes selected ID, you fetch details.
  `switchMap` cancels old requests automatically.
  
  ```ts
  import { Subject, switchMap } from 'rxjs';
  
  const selectedId$ = new Subject<number>();
  
  selectedId$.pipe(
    switchMap(id => this.http.get(`/api/users/${id}`))
  ).subscribe(user => console.log(user));
  ```
  
  ## Visual: why switchMap is useful
  
  ```mermaid
  flowchart LR
    A[User selects ID 1] --> B[Request 1 starts]
    A2[User selects ID 2 quickly] --> C[Request 2 starts]
    C --> D[Request 1 canceled]
  ```
  
  > Next: Content projection (ng-content), build reusable layouts.

Learn the most useful RxJS operators for Angular apps with real examples.

RxJS Operators You Actually Need (map, filter, switchMap)

Content projection lets a component receive HTML content from the outside.
  
  Think: a Card component where you can place any title, text, buttons inside.
  
  ## Step 1: Create a Card component
  
  ```ts
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-card',
    standalone: true,
    template: `
      <div class="card">
        <ng-content></ng-content>
      </div>
    `,
  })
  export class CardComponent {}
  ```
  
  ## Step 2: Use it with custom content
  
  ```html
  <app-card>
    <h3>Pricing</h3>
    <p>Starter plan is $9/month.</p>
    <button>Choose Plan</button>
  </app-card>
  ```
  
  ## Why it’s powerful
  
  You create consistent UI shells, and you keep flexibility inside.
  
  > Next: ViewChild, access template elements when you truly need it.

Build reusable card and layout components that accept custom content using ng-content.

Content Projection with ng-content (Reusable Layouts)

`@ViewChild` lets you reference an element or a child component instance from your template.
  
  ## Example: focus an input after page load
  
  Template:
  
  ```html
  <input #searchInput placeholder="Search..." />
  <button (click)="focus()">Focus Input</button>
  ```
  
  Component:
  
  ```ts
  import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-search',
    standalone: true,
    templateUrl: './search.component.html',
  })
  export class SearchComponent implements AfterViewInit {
    @ViewChild('searchInput') searchInput?: ElementRef<HTMLInputElement>;
  
    ngAfterViewInit() {
      this.searchInput?.nativeElement.focus();
    }
  
    focus() {
      this.searchInput?.nativeElement.focus();
    }
  }
  ```
  
  ## Best practice
  
  Use ViewChild only when needed. Most UI should be controlled through binding, not direct DOM access.
  
  > Next: Change detection basics and why performance sometimes feels “mysterious.”

Use @ViewChild to focus inputs, call child component methods, and integrate UI behaviors safely.

ViewChild: Access DOM Elements and Child Components

Change detection is Angular’s process of checking data and updating the UI when something changes.
  
  ## Simple rule
  
  Angular updates the UI when:
  - you click (events)
  - HTTP response arrives
  - timers fire
  - Observables emit
  - input values change
  
  ## Why this matters
  
  Sometimes developers call methods in templates and wonder why the page feels slow. That method can run many times.
  
  Example to avoid:
  
  ```html
  <p>{{ calculateTotal() }}</p>
  ```
  
  If `calculateTotal()` is heavy, it can slow rendering.
  
  ## Better approach
  
  Compute once, store the result:
  
  ```ts
  total = 0;
  
  ngOnInit() {
    this.total = this.items.reduce((sum, x) => sum + x.price, 0);
  }
  ```
  
  ## Pro tip
  
  Use:
  - `async` pipe
  - `trackBy` in `*ngFor`
  - keep templates simple
  
  > Next: New control flow syntax (@if, @for) and how it compares to *ngIf/*ngFor.

Understand how Angular decides to update the screen, with simple rules and practical tips.

Change Detection Basics (Why the UI Updates)

Modern Angular introduced a new template control flow syntax like `@if` and `@for`. It can make templates cleaner and more readable.
  
  ## @if example
  
  ```html
  @if (isLoggedIn) {
    <h2>Welcome back!</h2>
  } @else {
    <h2>Please sign in</h2>
  }
  ```
  
  ## @for example
  
  ```html
  <ul>
    @for (skill of skills; track skill) {
      <li>{{ skill }}</li>
    }
  </ul>
  ```
  
  Component:
  
  ```ts
  export class SkillsComponent {
    isLoggedIn = true;
    skills = ['TypeScript', 'Angular', 'RxJS'];
  }
  ```
  
  ## Why developers like it
  
  - Templates read more like normal programming
  - Less `ng-template` noise in many cases
  - `track` is built in and encouraged
  
  ## When to use it
  
  If your Angular version supports it and your team agrees on style, it’s a great upgrade for readability.
  
  > Next set (remaining 30): Signals, computed/effect, advanced routing patterns, resolvers, state management, testing, and deployment.

Learn the modern Angular control flow syntax and write cleaner templates with @if and @for.

Modern Control Flow: @if and @for (New Angular Syntax)

Signals are Angular’s modern way to manage state. They make UI updates more predictable and often reduce the amount of RxJS code you need for local state.
    
    ## What problem do Signals solve?
    
    In many apps, developers used:
    - component properties (simple but limited)
    - RxJS Subjects/BehaviorSubjects (powerful but sometimes heavy for basic UI state)
    
    Signals sit in the middle:
    - easier than Subjects for UI state
    - still reactive, still fast
    - updates automatically refresh templates
    
    ## Create your first signal
    
    ```ts
    import { Component, signal } from '@angular/core';
    
    @Component({
      selector: 'app-counter',
      standalone: true,
      template: `
        <h2>Counter: {{ count() }}</h2>
        <button (click)="inc()">Increase</button>
      `,
    })
    export class CounterComponent {
      count = signal(0);
    
      inc() {
        this.count.update(v => v + 1);
      }
    }
    ```
    
    ### Notice something new
    You read a signal like a function: `count()`  
    This tells Angular: “track this value and update UI if it changes.”
    
    ## set vs update
    
    ```ts
    this.count.set(10);              // replace value
    this.count.update(v => v + 1);   // compute next value
    ```
    
    ## Where Signals are best
    
    - UI state: toggles, filters, selected tabs
    - local component state that drives the view
    - derived UI values (with computed, next lesson)
    
    > Next: computed() and effect() to build real reactive logic.

Learn what Signals are, why Angular added them, and how they simplify state updates compared to older patterns.

Angular Signals Introduction (Modern State)

Signals become powerful when you combine:
    - `computed()` for values derived from other signals
    - `effect()` for side effects (logging, saving, calling APIs carefully)
    
    ## computed(): derived values
    
    ```ts
    import { Component, signal, computed } from '@angular/core';
    
    @Component({
      selector: 'app-cart',
      standalone: true,
      template: `
        <p>Items: {{ items() }}</p>
        <p>Price each: ${{ price() }}</p>
        <p>Total: ${{ total() }}</p>
      `,
    })
    export class CartComponent {
      items = signal(2);
      price = signal(25);
    
      total = computed(() => this.items() * this.price());
    }
    ```
    
    If items or price changes, total updates automatically.
    
    ## effect(): react when signals change
    
    ```ts
    import { effect } from '@angular/core';
    
    constructor() {
      effect(() => {
        console.log('Total changed:', this.total());
      });
    }
    ```
    
    ### Important rule
    Use `effect` for side effects, not for computing values.  
    For computed values, use `computed`.
    
    ## Practical use case
    Auto-save a draft when text changes:
    
    ```ts
    draft = signal('');
    
    constructor() {
      effect(() => {
        const value = this.draft();
        localStorage.setItem('draft', value);
      });
    }
    ```
    
    > Next: Signals vs Observables, when to choose which one.

Use computed for derived values and effect for side effects, the safe and modern reactive pattern.

Signals computed() and effect(): Reactive Logic Done Right

Both Signals and Observables are reactive, but they solve different kinds of problems.
    
    ## Quick comparison
    
    ### Signals are great for
    - local UI state
    - derived values inside components
    - simple reactive logic without stream operators
    
    ### Observables are great for
    - async streams (HTTP, websockets, events)
    - cancelation and operator pipelines
    - complex async workflows (switchMap, retry, debounceTime)
    
    ## Think of it like this
    
    ```mermaid
    flowchart LR
      A[Signals] --> B[Local UI State]
      A --> C[Derived UI Values]
      D[Observables] --> E[Async Streams]
      D --> F[Event Pipelines]
      D --> G[Cancelable Requests]
    ```
    
    ## Best practice for modern Angular teams
    
    - Use Signals for component state.
    - Use Observables for external async data.
    - Convert between them when needed (without mixing everything).
    
    > Next: Converting Observables to Signals and using them together cleanly.

Understand the difference between Signals and RxJS Observables, and make the right choice in real projects.

Signals vs Observables: When to Use Each

Many apps fetch data using `HttpClient` (Observables) but want to use Signals in the UI. Angular supports this cleanly.
    
    ## Example: API Observable to Signal
    
    ```ts
    import { Component, computed } from '@angular/core';
    import { toSignal } from '@angular/core/rxjs-interop';
    import { ProductsApi } from './products.api';
    
    @Component({
      selector: 'app-products',
      standalone: true,
      template: `
        <h2>Products</h2>
        <p *ngIf="loading()">Loading...</p>
        <ul>
          <li *ngFor="let p of products()">{{ p.title }}</li>
        </ul>
      `,
    })
    export class ProductsComponent {
      products = toSignal(this.api.getProducts(), { initialValue: [] });
      loading = computed(() => this.products().length === 0);
    
      constructor(private api: ProductsApi) {}
    }
    ```
    
    ## Why this is nice
    
    - no manual subscribe/unsubscribe
    - template reads like normal state: `products()`
    - works great with computed values
    
    ## Note on loading
    A real app should track loading based on request state, not only array length, but this is an easy beginner-friendly pattern.
    
    > Next: Advanced routing with resolvers, preloading, and nested routes.

Use toSignal to consume API data as Signals and keep your components simple.

Convert Observables to Signals (Practical Integration)

Most real applications have layout pages like:
    - dashboard with sidebar
    - admin area
    - settings pages
    
    You do not want to repeat the sidebar on every page. Nested routes solve this.
    
    ## Step 1: Create a layout component
    
    ```ts
    import { Component } from '@angular/core';
    import { RouterOutlet, RouterLink } from '@angular/router';
    
    @Component({
      selector: 'app-dashboard-layout',
      standalone: true,
      imports: [RouterOutlet, RouterLink],
      template: `
        <div class="layout">
          <aside>
            <a routerLink="/dashboard">Home</a>
            <a routerLink="/dashboard/settings">Settings</a>
          </aside>
    
          <main>
            <router-outlet></router-outlet>
          </main>
        </div>
      `,
    })
    export class DashboardLayoutComponent {}
    ```
    
    ## Step 2: Add child routes
    
    ```ts
    export const routes = [
      {
        path: 'dashboard',
        component: DashboardLayoutComponent,
        children: [
          { path: '', loadComponent: () => import('./dash-home.component').then(m => m.DashHomeComponent) },
          { path: 'settings', loadComponent: () => import('./dash-settings.component').then(m => m.DashSettingsComponent) },
        ],
      },
    ];
    ```
    
    ## How it renders
    
    ```mermaid
    flowchart TD
      A[/dashboard URL] --> B[DashboardLayoutComponent]
      B --> C[router-outlet inside layout]
      C --> D[DashHomeComponent]
    ```
    
    > Next: Route resolvers to load data before page opens.

Build dashboard layouts with child routes, shared sidebars, and clean navigation patterns.

Nested Routes and Layout Pages (Professional Routing)

Resolvers fetch data before a route activates. This is perfect when:
    - the page cannot render without data
    - you want fewer loading states inside components
    - you want a smoother navigation experience
    
    ## Step 1: Create a resolver (functional resolver)
    
    ```ts
    import { ResolveFn } from '@angular/router';
    import { inject } from '@angular/core';
    import { UsersApi } from './users.api';
    
    export const userResolver: ResolveFn<any> = (route) => {
      const api = inject(UsersApi);
      const id = route.paramMap.get('id')!;
      return api.getUser(id);
    };
    ```
    
    ## Step 2: Add it to the route
    
    ```ts
    {
      path: 'users/:id',
      loadComponent: () => import('./user-details.component').then(m => m.UserDetailsComponent),
      resolve: { user: userResolver },
    }
    ```
    
    ## Step 3: Read resolved data in component
    
    ```ts
    import { Component } from '@angular/core';
    import { ActivatedRoute } from '@angular/router';
    
    @Component({
      selector: 'app-user-details',
      standalone: true,
      template: `
        <h2>{{ user?.name }}</h2>
        <p>Email: {{ user?.email }}</p>
      `,
    })
    export class UserDetailsComponent {
      user: any;
    
      constructor(route: ActivatedRoute) {
        this.user = route.snapshot.data['user'];
      }
    }
    ```
    
    ## Tradeoff
    
    Resolvers can slow navigation slightly because they fetch before page shows. Use when the UI truly depends on the data.
    
    > Next: Preloading strategies to speed up lazy routes.

Use resolvers to fetch data before a page loads, reducing empty UI flashes and improving UX.

Route Resolvers: Load Data Before Navigation

Lazy loading makes initial load faster, but the first visit to a lazy route can feel slower. Preloading solves that by loading feature bundles in the background after the app starts.
    
    ## The idea
    
    - App loads fast
    - After the user lands, Angular quietly preloads feature routes
    - Later navigation feels instant
    
    ## Enable preloading
    
    ```ts
    import { provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
    
    bootstrapApplication(AppComponent, {
      providers: [
        provideRouter(routes, withPreloading(PreloadAllModules)),
      ],
    });
    ```
    
    ## When to use
    
    - dashboards with many pages
    - apps where users likely visit most routes
    - when network is decent and you want smoother UX
    
    ## When not to use
    
    - very large features rarely visited
    - strict bandwidth environments (some mobile cases)
    
    > Next: FormArrays and dynamic forms like “add more addresses.”

Preload lazy-loaded routes after initial load so navigation feels instant later.

Preloading Lazy Routes (Better Perceived Performance)

FormArray is used when you have a list of form controls that can grow or shrink.
    
    Real examples:
    - multiple phone numbers
    - skills list
    - multiple shipping addresses
    
    ## Step 1: Build a FormArray
    
    ```ts
    import { Component } from '@angular/core';
    import { ReactiveFormsModule, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
    import { CommonModule } from '@angular/common';
    
    @Component({
      selector: 'app-skills-form',
      standalone: true,
      imports: [ReactiveFormsModule, CommonModule],
      templateUrl: './skills-form.component.html',
    })
    export class SkillsFormComponent {
      form = new FormGroup({
        name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
        skills: new FormArray<FormControl<string>>([
          new FormControl('HTML', { nonNullable: true }),
        ]),
      });
    
      get skills() {
        return this.form.controls.skills;
      }
    
      addSkill() {
        this.skills.push(new FormControl('', { nonNullable: true }));
      }
    
      removeSkill(index: number) {
        this.skills.removeAt(index);
      }
    
      submit() {
        console.log(this.form.value);
      }
    }
    ```
    
    ## Step 2: Template
    
    ```html
    <form [formGroup]="form" (ngSubmit)="submit()">
      <label>Name</label>
      <input formControlName="name" />
    
      <h3>Skills</h3>
    
      <div formArrayName="skills">
        <div *ngFor="let ctrl of skills.controls; let i = index">
          <input [formControlName]="i" placeholder="Skill" />
          <button type="button" (click)="removeSkill(i)">Remove</button>
        </div>
      </div>
    
      <button type="button" (click)="addSkill()">Add Skill</button>
      <button type="submit">Save</button>
    </form>
    ```
    
    ## Why this is advanced and useful
    
    This pattern powers most “add more” experiences in professional apps.
    
    > Next: Async validators, checking email uniqueness from an API.

Build dynamic forms where users can add or remove items, like multiple phone numbers or addresses.

Reactive Forms: FormArray for Dynamic Fields

Async validators are perfect when validation depends on server data.
    
    Example:
    - email already exists
    - username already taken
    - coupon code valid
    
    ## Step 1: Create an async validator
    
    ```ts
    import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
    import { debounceTime, map, of, switchMap } from 'rxjs';
    import { inject } from '@angular/core';
    import { UsersApi } from './users.api';
    
    export const emailAvailableValidator = (): AsyncValidatorFn => {
      const api = inject(UsersApi);
    
      return (control: AbstractControl) => {
        if (!control.value) return of(null);
    
        return of(control.value).pipe(
          debounceTime(400),
          switchMap(email => api.checkEmail(email)),
          map(res => (res.available ? null : { emailTaken: true }))
        );
      };
    };
    ```
    
    Assume backend returns: `{ available: true | false }`
    
    ## Step 2: Use it on a control
    
    ```ts
    email: new FormControl('', {
      nonNullable: true,
      validators: [Validators.required, Validators.email],
      asyncValidators: [emailAvailableValidator()],
    })
    ```
    
    ## Step 3: Show message in UI
    
    ```html
    <div *ngIf="form.controls.email.errors?.['emailTaken']">
      This email is already registered.
    </div>
    ```
    
    ## Important performance tip
    
    Always debounce async validators, otherwise you spam the API on every keystroke.
    
    > Next: Custom form controls with ControlValueAccessor.

Validate input using an API call, like checking if an email is already taken.

Reactive Forms: Async Validators (Email Uniqueness)

ControlValueAccessor (CVA) lets you build a custom input component that works with Angular forms.
    
    Example custom controls:
    - star rating
    - phone input with country code
    - date picker wrapper
    
    ## Goal: Star rating input that works with formControlName
    
    ### Step 1: Create a rating component
    
    ```ts
    import { Component, forwardRef } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
    import { CommonModule } from '@angular/common';
    
    @Component({
      selector: 'app-rating',
      standalone: true,
      imports: [CommonModule],
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => RatingComponent),
          multi: true,
        },
      ],
      template: `
        <div class="stars">
          <button type="button" *ngFor="let s of stars" (click)="set(s)">
            {{ s <= value ? '★' : '☆' }}
          </button>
        </div>
      `,
    })
    export class RatingComponent implements ControlValueAccessor {
      stars = [1, 2, 3, 4, 5];
      value = 0;
      disabled = false;
    
      private onChange: (v: number) => void = () => {};
      private onTouched: () => void = () => {};
    
      writeValue(v: number): void {
        this.value = v ?? 0;
      }
    
      registerOnChange(fn: (v: number) => void): void {
        this.onChange = fn;
      }
    
      registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
      }
    
      setDisabledState(isDisabled: boolean): void {
        this.disabled = isDisabled;
      }
    
      set(v: number) {
        if (this.disabled) return;
        this.value = v;
        this.onChange(v);
        this.onTouched();
      }
    }
    ```
    
    ### Step 2: Use it in a reactive form
    
    ```html
    <form [formGroup]="form">
      <app-rating formControlName="rating"></app-rating>
    </form>
    ```
    
    Now your custom component behaves like a native input.
    
    > Next: State management options (Signals store patterns, NgRx, Akita style decisions).

Integrate custom UI widgets (date pickers, rating stars) with Angular forms like built-in inputs.

Custom Form Controls with ControlValueAccessor

State management becomes important when your app grows beyond a few components.
    
    ## Levels of state (professional view)
    
    ### 1) Local component state
    Best for:
    - toggles, dropdowns, UI selection
    Tools:
    - component properties
    - Signals
    
    ### 2) Shared app state (feature-level)
    Best for:
    - logged-in user profile
    - shopping cart
    - filters shared across pages
    Tools:
    - a shared service with Signals
    - BehaviorSubject pattern
    
    ### 3) Global enterprise state
    Best for:
    - huge apps with many teams
    - strict patterns and dev tooling
    Tools:
    - NgRx (actions, reducers, effects)
    
    ## Quick decision chart
    
    ```mermaid
    flowchart TD
      A[Need shared state?] -->|No| B[Use local Signals]
      A -->|Yes| C[Is it a big multi-team app?]
      C -->|No| D[Signals Store Service]
      C -->|Yes| E[NgRx or equivalent]
    ```
    
    ## Key idea
    
    Do not over-engineer early. Start simple, scale when pain appears.
    
    > Next: Build a simple Signals-based store service step by step.

Learn how to choose between local state, Signals-based stores, and NgRx for large applications.

State Management in Angular: Options and Tradeoffs

A Signals store is often just a service that holds signals and exposes safe methods.
    
    ## Step 1: Create a CartStore service
    
    ```ts
    import { Injectable, computed, signal } from '@angular/core';
    
    export type CartItem = { id: number; title: string; price: number; qty: number };
    
    @Injectable({ providedIn: 'root' })
    export class CartStore {
      private itemsSig = signal<CartItem[]>([]);
    
      items = computed(() => this.itemsSig());
      count = computed(() => this.itemsSig().reduce((sum, i) => sum + i.qty, 0));
      total = computed(() => this.itemsSig().reduce((sum, i) => sum + i.price * i.qty, 0));
    
      add(item: Omit<CartItem, 'qty'>) {
        this.itemsSig.update(list => {
          const found = list.find(x => x.id === item.id);
          if (found) {
            return list.map(x => (x.id === item.id ? { ...x, qty: x.qty + 1 } : x));
          }
          return [...list, { ...item, qty: 1 }];
        });
      }
    
      remove(id: number) {
        this.itemsSig.update(list => list.filter(x => x.id !== id));
      }
    
      clear() {
        this.itemsSig.set([]);
      }
    }
    ```
    
    ## Step 2: Use it from any component
    
    ```ts
    import { Component } from '@angular/core';
    import { CartStore } from './cart.store';
    
    @Component({
      selector: 'app-cart-summary',
      standalone: true,
      template: `
        <p>Items: {{ cart.count() }}</p>
        <p>Total: ${{ cart.total() }}</p>
      `,
    })
    export class CartSummaryComponent {
      constructor(public cart: CartStore) {}
    }
    ```
    
    ## Why this pattern is powerful
    
    - no boilerplate actions/reducers
    - easy to read
    - computed values stay consistent
    
    > Next: NgRx explained simply and when it’s worth it.

Create a lightweight store using Signals that multiple components can share, without adopting a full framework.

Build a Simple Signals Store Service (Cart Example)

NgRx is a state management framework inspired by Redux.
    
    It introduces a consistent pattern:
    - Actions describe events
    - Reducers compute next state
    - Selectors read state
    - Effects handle async side work (API calls)
    
    ## Why teams adopt NgRx
    
    - strict structure for large apps
    - great dev tools (time travel debugging)
    - predictable flow, easier long-term maintenance
    
    ## When NgRx is overkill
    
    - small apps
    - few screens
    - minimal shared state
    - fast-moving MVP stage
    
    ## NgRx flow picture
    
    ```mermaid
    flowchart LR
      UI[Component] --> A[Action]
      A --> R[Reducer]
      R --> S[Store State]
      S --> UI
      A --> E[Effect]
      E --> API[Backend API]
      API --> E
      E --> A2[Success/Fail Action]
      A2 --> R
    ```
    
    > Next: Advanced performance, OnPush and immutability patterns.

Understand NgRx concepts without confusion, and learn when it is a good investment.

NgRx Explained Simply (When You Really Need It)

OnPush makes Angular skip some change detection work. It can dramatically improve performance in large component trees.
    
    ## What OnPush means
    
    With default change detection:
    - Angular checks many components frequently.
    
    With OnPush:
    - Angular checks a component only when:
      1) an @Input reference changes
      2) an event happens inside it
      3) an Observable/Signal it uses emits/updates
    
    ## Use OnPush
    
    ```ts
    import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
    
    @Component({
      selector: 'app-user-row',
      standalone: true,
      changeDetection: ChangeDetectionStrategy.OnPush,
      template: `
        <p>{{ user.name }} ({{ user.role }})</p>
      `,
    })
    export class UserRowComponent {
      @Input() user!: { id: number; name: string; role: string };
    }
    ```
    
    ## The key rule: immutable updates
    
    If you mutate an object in place, OnPush may not detect it.
    
    ❌ Bad:
    ```ts
    this.user.name = 'New'; // same object reference
    ```
    
    ✅ Good:
    ```ts
    this.user = { ...this.user, name: 'New' }; // new reference
    ```
    
    > Next: TrackBy + virtualization patterns for huge lists.

Use OnPush to reduce unnecessary checks and build fast UI with proper immutable patterns.

ChangeDetectionStrategy.OnPush (Real Performance Gains)

When you display large lists, performance can drop fast. Two tools help the most:
    1) trackBy
    2) virtual scrolling (render only what is visible)
    
    ## Step 1: Always use trackBy
    
    ```html
    <li *ngFor="let item of items; trackBy: byId">
      {{ item.title }}
    </li>
    ```
    
    ```ts
    byId(_: number, item: { id: number }) {
      return item.id;
    }
    ```
    
    ## Step 2: Use CDK Virtual Scroll for very big lists
    
    Install Angular CDK if needed, then:
    
    ```ts
    import { Component } from '@angular/core';
    import { ScrollingModule } from '@angular/cdk/scrolling';
    
    @Component({
      selector: 'app-big-list',
      standalone: true,
      imports: [ScrollingModule],
      template: `
        <cdk-virtual-scroll-viewport itemSize="50" style="height: 400px;">
          <div *cdkVirtualFor="let item of items; trackBy: byId">
            {{ item.title }}
          </div>
        </cdk-virtual-scroll-viewport>
      `,
    })
    export class BigListComponent {
      items = Array.from({ length: 10000 }).map((_, i) => ({ id: i, title: 'Row ' + i }));
    
      byId(_: number, item: { id: number }) {
        return item.id;
      }
    }
    ```
    
    ## Why it works
    
    Virtual scroll renders maybe 20–50 items at a time, not 10,000.
    
    > Next: Security topics, XSS, sanitization, and safe rendering.

Render thousands of rows smoothly using trackBy and CDK virtual scrolling.

Huge Lists: trackBy + Virtual Scrolling

XSS (Cross-Site Scripting) happens when attackers inject malicious scripts into your page, often through user-generated content.
    
    Angular protects you by default in many cases, but you still need to understand safe patterns.
    
    ## Example: dangerous HTML rendering
    
    If you do this:
    
    ```html
    <div [innerHTML]="htmlFromApi"></div>
    ```
    
    Angular will sanitize a lot of it, but you still should treat it carefully.
    
    ## Best practice
    
    - Avoid rendering raw HTML unless you truly need it.
    - Prefer structured content and templates.
    
    ## If you must render HTML
    
    Use Angular’s sanitization tools, and only bypass security if you completely trust the source.
    
    ```ts
    import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
    
    export class ArticleComponent {
      safeHtml: SafeHtml;
    
      constructor(sanitizer: DomSanitizer) {
        const htmlFromApi = '<p>Hello</p>';
        this.safeHtml = sanitizer.bypassSecurityTrustHtml(htmlFromApi);
      }
    }
    ```
    
    ### Warning
    `bypassSecurityTrustHtml` means “I trust this input.” Use it only when content is from a trusted pipeline.
    
    > Next: Authentication patterns, JWT, interceptors, and route guards together.

Learn how Angular protects against XSS, when you must sanitize HTML, and common security mistakes.

Angular Security Basics: XSS and Safe Rendering

A standard Angular JWT setup has 3 parts:
    1) Auth service (login + token storage)
    2) HTTP interceptor (attach token)
    3) Route guard (block protected pages)
    
    ## 1) Auth service
    
    ```ts
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { tap } from 'rxjs';
    
    @Injectable({ providedIn: 'root' })
    export class AuthService {
      constructor(private http: HttpClient) {}
    
      login(email: string, password: string) {
        return this.http.post<{ token: string }>('/api/login', { email, password }).pipe(
          tap(res => localStorage.setItem('token', res.token))
        );
      }
    
      logout() {
        localStorage.removeItem('token');
      }
    
      get token() {
        return localStorage.getItem('token');
      }
    
      get isLoggedIn() {
        return !!this.token;
      }
    }
    ```
    
    ## 2) Interceptor (attach token)
    
    ```ts
    import { HttpInterceptorFn } from '@angular/common/http';
    import { inject } from '@angular/core';
    import { AuthService } from './auth.service';
    
    export const authInterceptor: HttpInterceptorFn = (req, next) => {
      const auth = inject(AuthService);
      const token = auth.token;
    
      if (!token) return next(req);
    
      return next(
        req.clone({
          setHeaders: { Authorization: `Bearer ${token}` },
        })
      );
    };
    ```
    
    ## 3) Guard (protect routes)
    
    ```ts
    import { CanActivateFn, Router } from '@angular/router';
    import { inject } from '@angular/core';
    import { AuthService } from './auth.service';
    
    export const authGuard: CanActivateFn = () => {
      const auth = inject(AuthService);
      const router = inject(Router);
    
      if (auth.isLoggedIn) return true;
    
      router.navigate(['/login']);
      return false;
    };
    ```
    
    ## Visual: request flow
    
    ```mermaid
    flowchart LR
      UI[Component] --> API[HttpClient Request]
      API --> INT[Interceptor adds token]
      INT --> BE[Backend]
      BE --> INT
      INT --> UI
    ```
    
    > Next: Token refresh and handling 401 responses gracefully.

Put together the standard real-world auth flow: login, store token, intercept API calls, protect routes.

JWT Authentication in Angular (Guard + Interceptor Pattern)

In real systems, tokens expire. If your API returns 401, you should:
    - attempt refresh (if your backend supports it)
    - retry the original request once
    - if refresh fails, log out and redirect to login
    
    ## Conceptual flow (easy to remember)
    
    ```mermaid
    flowchart TD
      A[API Request] --> B{401?}
      B -->|No| C[Return Response]
      B -->|Yes| D[Try Refresh Token]
      D --> E{Refresh OK?}
      E -->|Yes| F[Retry Original Request]
      E -->|No| G[Logout + Redirect]
    ```
    
    ## Safe retry rule
    
    Never retry forever. Retry once after refresh.
    
    ## Practical note
    
    Implementation details vary by backend:
    - Some use refresh token cookies (more secure)
    - Some return refresh tokens in response body
    - Some require silent re-login (OIDC providers)
    
    If you want, I can generate a clean interceptor-based implementation based on your backend’s refresh design.
    
    > Next: Environment configs, build-time vs runtime config for multi environments.

Handle expired tokens without breaking user experience, including retrying requests safely.

Handling 401 Errors and Refresh Tokens (Real-World Pattern)

Angular apps often run in multiple environments:
    - local dev
    - staging
    - production
    
    You usually need different values:
    - API base URL
    - analytics keys
    - feature flags
    
    ## Option A: Build-time environments (simple)
    
    Use `environment.ts` files. Angular replaces them per configuration.
    
    Pros:
    - easy
    - fast
    
    Cons:
    - you must rebuild for every environment
    
    ## Option B: Runtime config (best for many environments)
    
    Load a JSON config at runtime like:
    `/assets/config.json`
    
    Then your same build can be deployed anywhere by changing config.
    
    ### Example runtime config idea
    
    ```ts
    export type AppConfig = { apiBaseUrl: string };
    
    let config: AppConfig;
    
    export async function loadConfig() {
      const res = await fetch('/assets/config.json');
      config = await res.json();
    }
    
    export function getConfig() {
      return config;
    }
    ```
    
    ### Bootstrapping after config loads
    You call `loadConfig()` before `bootstrapApplication`.
    
    ## When runtime config is worth it
    
    - lots of environments (like your 80+ env style)
    - same build deployed repeatedly
    - DevOps wants config changes without rebuilding
    
    > Next: Testing, unit tests vs integration tests and where Angular fits.

Learn how to manage API base URLs and feature flags across dev, staging, and production safely.

Environment Configuration: Build-Time vs Runtime Config

Testing is not about writing tests everywhere. It’s about protecting the parts that break most often.
    
    ## Three levels of tests
    
    ### 1) Unit tests
    Test small logic:
    - pipes
    - pure functions
    - simple services
    
    Fast, cheap, lots of coverage.
    
    ### 2) Integration tests
    Test components with their dependencies:
    - component + template rendering
    - form validation
    - service calls mocked
    
    Great value for Angular apps.
    
    ### 3) End-to-end (E2E) tests
    Test full user workflows:
    - login flow
    - checkout flow
    - critical navigation
    
    Slower, but catches real-world breakage.
    
    ## A smart rule
    
    - Unit test logic-heavy code
    - Integration test key UI flows
    - E2E test only the top 5 most critical business journeys
    
    ## Testing pyramid picture
    
    ```mermaid
    flowchart TD
      A[E2E: Few]
      B[Integration: Some] --> A
      C[Unit: Many] --> B
    ```
    
    > Next: Component unit testing basics using TestBed and mocking services.

A practical testing strategy for Angular apps, from components to API flows.

Testing Angular: Unit, Integration, and E2E (What to Test)

Let’s test a component that loads a username from a service.
    
    ## Component
    
    ```ts
    import { Component } from '@angular/core';
    import { UserService } from './user.service';
    
    @Component({
      selector: 'app-greeting',
      standalone: true,
      template: `<h1>Hello {{ name }}</h1>`,
    })
    export class GreetingComponent {
      name = '';
    
      constructor(userService: UserService) {
        this.name = userService.getName();
      }
    }
    ```
    
    ## Test idea
    
    We do not want to use the real service in a unit test. We mock it.
    
    ```ts
    import { TestBed } from '@angular/core/testing';
    import { GreetingComponent } from './greeting.component';
    import { UserService } from './user.service';
    
    describe('GreetingComponent', () => {
      it('shows name from service', () => {
        TestBed.configureTestingModule({
          imports: [GreetingComponent],
          providers: [
            {
              provide: UserService,
              useValue: { getName: () => 'Jessica Miller' },
            },
          ],
        });
    
        const fixture = TestBed.createComponent(GreetingComponent);
        fixture.detectChanges();
    
        const el: HTMLElement = fixture.nativeElement;
        expect(el.textContent).toContain('Hello Jessica Miller');
      });
    });
    ```
    
    ## Why this is clean
    
    - component is tested in isolation
    - predictable output
    - fast execution
    
    > Next: HTTP testing with HttpTestingController.

Write a clean unit test for a component by mocking its service dependency.

Unit Testing a Component (TestBed + Mock Service)

Testing HTTP services should not hit the real backend. Angular provides HttpTestingController to fake responses.
    
    ## Service
    
    ```ts
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';
    
    export type Product = { id: number; title: string };
    
    @Injectable({ providedIn: 'root' })
    export class ProductsApi {
      constructor(private http: HttpClient) {}
    
      getProducts(): Observable<Product[]> {
        return this.http.get<Product[]>('/api/products');
      }
    }
    ```
    
    ## Test
    
    ```ts
    import { TestBed } from '@angular/core/testing';
    import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
    import { provideHttpClient } from '@angular/common/http';
    import { ProductsApi } from './products.api';
    
    describe('ProductsApi', () => {
      it('returns products from API', () => {
        TestBed.configureTestingModule({
          providers: [ProductsApi, provideHttpClient(), provideHttpClientTesting()],
        });
    
        const api = TestBed.inject(ProductsApi);
        const httpMock = TestBed.inject(HttpTestingController);
    
        api.getProducts().subscribe(data => {
          expect(data.length).toBe(2);
          expect(data[0].title).toBe('Laptop');
        });
    
        const req = httpMock.expectOne('/api/products');
        expect(req.request.method).toBe('GET');
    
        req.flush([
          { id: 1, title: 'Laptop' },
          { id: 2, title: 'Phone' },
        ]);
    
        httpMock.verify();
      });
    });
    ```
    
    ## What this gives you
    
    - fast tests
    - no real backend dependency
    - ability to test error handling too
    
    > Next: SSR in Angular, what it is and the gotchas.

Test API services without real network calls using HttpTestingController.

Testing HTTP Calls with HttpTestingController

SSR means the server renders HTML first, so the browser receives a ready page.
    
    ## Why SSR matters
    
    ### 1) SEO
    Search engines can read server-rendered HTML better than an empty page.
    
    ### 2) Faster first paint
    Users see content earlier.
    
    ## CSR vs SSR (simple)
    
    ```mermaid
    flowchart LR
      A[CSR] --> B[Browser downloads JS]
      B --> C[JS builds HTML]
      C --> D[User sees content]
    
      E[SSR] --> F[Server builds HTML]
      F --> G[Browser shows HTML quickly]
      G --> H[JS hydrates and becomes interactive]
    ```
    
    ## What "hydration" means
    
    Hydration means Angular takes over the already-rendered HTML and adds interactivity (clicks, inputs).
    
    ## Biggest SSR gotcha
    
    Do not access browser-only APIs directly:
    - window
    - document
    - localStorage
    
    Because they do not exist on the server.
    
    Better: check platform or use injection tokens.
    
    > Next: SSR safe patterns (Platform checks and TransferState).

Understand SSR, why it matters for SEO and performance, and what changes in your code.

Angular SSR (Server-Side Rendering) Explained Clearly

SSR changes where your code runs. Some code runs on the server first, then in the browser.
    
    ## Problem: window/document not available on server
    
    ❌ Bad:
    ```ts
    localStorage.getItem('token');
    ```
    
    ## Solution: check platform
    
    ```ts
    import { inject, PLATFORM_ID } from '@angular/core';
    import { isPlatformBrowser } from '@angular/common';
    
    export class TokenService {
      private platformId = inject(PLATFORM_ID);
    
      getToken() {
        if (!isPlatformBrowser(this.platformId)) return null;
        return localStorage.getItem('token');
      }
    }
    ```
    
    ## TransferState (avoid double fetching)
    
    When server fetches data, you can reuse it in the browser without fetching again.
    
    Concept:
    - server calls API
    - saves response to TransferState
    - browser reads it and skips duplicate request
    
    This makes SSR fast and efficient.
    
    > Next: Angular deployment strategies, builds, caching, and versioning.

Write Angular code that works both on server and browser, including data transfer without double-fetch.

SSR Safe Coding: window/document, localStorage, and TransferState

A professional deployment is not just 'ng build'. It includes:
    - caching strategy
    - cache busting
    - performance budgets
    
    ## Cache busting (Angular already helps)
    
    Angular outputs hashed filenames like:
    `main.8f3a2c.js`
    
    That means you can cache JS for a long time safely.
    
    ## Recommended caching strategy
    
    - HTML: short cache (or no-cache), because it changes and points to new bundles
    - JS/CSS assets: long cache because filenames are hashed
    
    ## Budgets (prevent bundle bloat)
    
    In `angular.json`, budgets can warn if bundles get too big.
    This protects performance as the app grows.
    
    ## Versioning tip
    
    Show app version in UI (footer or about page) so QA can verify deployments quickly.
    
    > Next: Error handling at scale, global error handler and logging.

Improve load performance with build optimization, caching rules, and safe deployment patterns.

Angular Build Optimization: Budgets, Caching, and Versioning

In production apps, you want visibility:
    - which errors happened
    - how often
    - on which page
    - which browser
    
    Angular allows a global error handler.
    
    ## Example: custom ErrorHandler
    
    ```ts
    import { ErrorHandler, Injectable } from '@angular/core';
    
    @Injectable()
    export class GlobalErrorHandler implements ErrorHandler {
      handleError(error: any) {
        console.error('Global error:', error);
    
        // Example: send to logging API
        // fetch('/api/log', { method: 'POST', body: JSON.stringify({ error }) });
      }
    }
    ```
    
    ## Provide it
    
    ```ts
    bootstrapApplication(AppComponent, {
      providers: [
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
      ],
    });
    ```
    
    ## Best practice
    
    - log errors with context (route, user id if safe, timestamp)
    - avoid logging sensitive data
    - show user-friendly fallback UI instead of raw error messages
    
    > Next: Guards vs resolvers vs interceptors, when to use which (architecture clarity).

Capture errors globally, report them to logging tools, and avoid silent failures in production.

Global Error Handling and Logging (Production Ready)

Angular gives multiple tools that look similar, but their responsibilities are different.
    
    ## Guards
    Purpose: decide if navigation is allowed  
    Examples:
    - user must be logged in
    - user must have role admin
    - prevent leaving page if unsaved changes
    
    ## Resolvers
    Purpose: fetch required data before route activates  
    Examples:
    - load user profile before opening /profile
    - load product details before /products/:id
    
    ## Interceptors
    Purpose: modify or react to HTTP requests and responses  
    Examples:
    - attach JWT token
    - handle 401 globally
    - log request durations
    
    ## Decision table (easy)
    
    - Navigation control = Guard
    - Preload route data = Resolver
    - HTTP cross-cutting behavior = Interceptor
    
    > Next: Advanced RxJS patterns, retry, backoff, and caching API responses.

Stop mixing responsibilities. Learn exactly what each tool is for and how to design clean Angular architecture.

Guards vs Resolvers vs Interceptors (Clear Decision Guide)

Production APIs sometimes fail temporarily. Your app should handle it gracefully.
    
    ## 1) retry with delay (simple backoff)
    
    ```ts
    import { retry, delay, of, throwError } from 'rxjs';
    
    this.http.get('/api/data').pipe(
      retry({
        count: 2,
        delay: (_err, retryCount) => of(null).pipe(delay(500 * retryCount)),
      })
    );
    ```
    
    This retries up to 2 times with increasing delay.
    
    ## 2) Basic caching pattern
    
    If multiple components request same data, caching avoids repeated calls.
    
    ```ts
    import { shareReplay } from 'rxjs';
    
    private products$ = this.http.get('/api/products').pipe(
      shareReplay(1)
    );
    
    getProducts() {
      return this.products$;
    }
    ```
    
    ## Why shareReplay(1) helps
    
    - first subscriber triggers request
    - later subscribers reuse cached response
    
    ## Warning
    
    Cache invalidation is real. If data changes often, add refresh logic.
    
    > Next: Angular animation basics and building smooth UI transitions.

Make your API layer resilient with retry strategies and cache responses to reduce load.

Advanced RxJS for HTTP: retry, backoff, and caching

Animations improve user experience when used with purpose, like:
    - dropdown open/close
    - accordion expand
    - page transition
    
    ## Step 1: Install animations module (if needed)
    
    In modern Angular, ensure animations are enabled via providers:
    `provideAnimations()`
    
    ## Step 2: Basic fade animation
    
    ```ts
    import { Component } from '@angular/core';
    import { trigger, transition, style, animate } from '@angular/animations';
    
    @Component({
      selector: 'app-fade',
      standalone: true,
      animations: [
        trigger('fade', [
          transition(':enter', [
            style({ opacity: 0 }),
            animate('200ms', style({ opacity: 1 })),
          ]),
          transition(':leave', [
            animate('200ms', style({ opacity: 0 })),
          ]),
        ]),
      ],
      template: `
        <button (click)="toggle()">Toggle</button>
        <p *ngIf="show" @fade>Now you see me</p>
      `,
    })
    export class FadeComponent {
      show = true;
      toggle() {
        this.show = !this.show;
      }
    }
    ```
    
    ## Keep animations professional
    
    - fast and subtle
    - do not animate everything
    - prefer simple transitions
    
    > Next: Internationalization (i18n) and localization patterns.

Add professional UI polish with Angular animations for expanding panels, fades, and route transitions.

Angular Animations: Smooth UI Transitions

Professional products often need multiple languages. Planning i18n early saves a lot of time.
    
    ## What i18n includes
    
    - translated text (labels, buttons, errors)
    - date/time formats by locale
    - number and currency formatting
    - right-to-left support (Arabic, Urdu)
    
    ## Two common approaches
    
    ### Approach A: Angular built-in i18n
    Pros:
    - strong integration
    - compile-time translations
    Cons:
    - build per locale (more DevOps work)
    
    ### Approach B: Runtime translation libraries
    Pros:
    - switch language without rebuilding
    - easier for multi-tenant apps
    Cons:
    - you must manage translation files and loading
    
    ## Important best practice
    
    Never hardcode text in many places. Centralize translation keys.
    
    ## Example (concept)
    Instead of:
    `"Save"`
    use a key like:
    `APP.SAVE`
    
    That makes translation consistent and scalable.
    
    > Next: In your next set, we can cover advanced topics like micro-frontends, module federation, PWA offline caching, and advanced DI patterns.

Prepare Angular for multiple languages, including translation strategy and common pitfalls.

Internationalization (i18n): Multi-Language Angular Apps

This comprehensive guide covers 50 essential Angular interview questions that every Angular developer should know. These questions cover fundamental concepts, components, services, routing, directives, dependency injection, and Angular best practices commonly asked in technical interviews.

## Core Angular Concepts

Understanding Angular's core concepts is essential. These questions test your knowledge of components, modules, services, and the Angular architecture.

## Components & Templates

Components are building blocks of Angular applications. Master these questions to demonstrate your understanding of component lifecycle, data binding, and template syntax.

## Services & Dependency Injection

Services provide shared functionality across components. These questions cover dependency injection, services, singletons, and how Angular manages dependencies.

## Routing & Navigation

Angular Router enables navigation between views. These questions cover routing configuration, guards, lazy loading, and navigation patterns.

## Directives & Pipes

Directives modify DOM, pipes transform data. These questions cover built-in and custom directives, pipes, and when to use each.

## Advanced Angular

Advanced topics include change detection, RxJS, forms, HTTP, and performance optimization. These questions test your deep understanding of Angular.

Comprehensive collection of 50 essential Angular interview questions covering components, services, routing, directives, and Angular best practices.

Angular Interview Questions: 50 Essential Questions for Developers

Angular 21 brings exciting new features and improvements. If you're building Angular apps in 2025, you need to know what's new. Let's explore the latest features and how they make development easier and faster.

## What's New in Angular 21?

Angular 21 introduces improved performance, new APIs, better developer experience, and modern features. The framework continues to evolve, making it easier to build scalable applications.

## Performance Improvements

Angular 21 includes optimizations for faster rendering, smaller bundle sizes, and improved change detection. These improvements happen automatically, but understanding them helps you write better code.

## New APIs and Features

Learn about new directives, improved dependency injection, and modern patterns. Angular 21 makes common tasks easier and provides better tools for building complex applications.

## Migration and Compatibility

I'll show you what's changed and how to migrate from older versions. Most changes are backward compatible, but knowing what's new helps you take advantage of improvements.

## Getting Started

I'll walk you through setting up Angular 21 and using the new features. This is how you build modern Angular applications in 2025.

Discover Angular 21's latest features and improvements. Learn about new APIs, performance enhancements, and modern Angular development patterns. Stay up-to-date with the latest Angular release.

Angular Resources

Browse Angular Content

Tutorials

Interview Questions

Practice Problems

Articles & Blog