Advanced Angular 21

Learning Goals

• Master computed signals, effects, and reactive component state.
• Learn when to use signals vs. RxJS.

Topics

• Creating and updating signals
• Computed signals and memoization
• Effects: lifecycle, cleanup, and avoiding infinite loops
• Converting between signals and observables
• Architectural guidance: signals for local state, RxJS for async and streams

Lab

• Build a reactive dashboard using signals + computed values.
• Create a signal store for a feature module.

Learning Goals

• Configure advanced routing using standalone APIs.
• Implement lazy loading, guards, resolvers, and route‑level providers.

Topics

• Standalone route configuration
• Functional guards and resolvers
• Route‑level providers and dependency injection
• Preloading strategies

Lab

• Add lazy‑loaded feature routes to a sample app.
• Extras – Implement a functional guard.

Learning Goals

• Understand the role of signals in local and global state.
• Compare signal stores, RxJS services, and NgRx.

Topics

• Local component state with signals
• Building a signal store (selectors, updaters, effects)
• When to use RxJS streams
• Integrating signals with NgRx (optional advanced topic)

Lab

• Convert an RxJS‑based service to a signal store.

Learning Goals

• Build scalable, typed reactive forms.
• Use signals to manage form state.

Topics

• Typed reactive forms
• Form groups, arrays, and nested structures
• Custom validators and async validators
• Form performance patterns
• Reusable form controls

Lab

• Build a multi‑step form with validation.

Learning Goals

• Understand Angular’s render pipeline and how render‑phase APIs fit in.
• Use afterNextRender() and afterEveryRender() effectively.

Topics

• Render vs. classic lifecycle hooks
• afterNextRender() for one‑time DOM work
• afterEveryRender() for repeated DOM measurement
• Avoiding anti‑patterns (e.g., unnecessary DOM reads)

Lab

• Add render‑phase logging to visualize lifecycle order.

Learning Goals

• Build scalable, maintainable components using modern Angular patterns.

Topics

• Smart vs. presentational components in a signal world
• Input/output patterns with signals
• Content projection (single‑slot and multi‑slot)
• View queries (viewChild, viewChildren, contentChild)

Lab

• Build a reusable card component with projected header/footer.

Learning Goals

• Use signals to reduce unnecessary change detection.

Topics

• Change detection with signals
• Memoization with computed signals
• Lazy loading

Lab

• Profile a slow component and optimize it using signals.
• Add memoized computed values to reduce template churn.

Learning Goals

• Write effective unit and integration tests for standalone components.
• Test signals, effects, and HTTP flows.

Topics

• TestBed in a standalone world
• Testing signals and effects
• Mocking HttpClient
• Testing routing and guards
• E2E testing with Playwright

Lab

• Write tests for a signal store.

Test a component with async HTTP data

Track Options

• Tailwind CSS integration
  • Component-Level Dynamic Styling with Signals
  • Tailwind + Angular Content Projection for Layout Systems
  • Tailwind + Angular Animations (Render-Phase Friendly)
  • Tailwind + Angular Control Flow (@if, @for, @switch)
  • Tailwind + Angular Host Bindings for Component APIs
• Zoneless Angular & Manual Change Detection
  • How Angular works without Zone.js
  • Manual render triggering
  • Signals as the new change detection mechanism
  • Building zoneless-compatible libraries
  • Performance profiling in zoneless mode
• Dependency Injection Internals
  • Provider resolution algorithm
  • DI tree construction
  • Multi-provider merging
  • Route-level provider scoping
  • DI cycles and resolution strategies
  • DI + signals interactions
• NgRx
  • Deep Dive into NgRx ComponentStore
  • NgRx Signals Store (Angular 17+)
  • Advanced Entity Management
  • NgRx Effects: Beyond the Basics
  • Performance Optimization in NgRx
  • NgRx Router Store: Advanced Usage
  • Testing NgRx at Scale