Advanced Angular Training

Lesson 1 • Angular CLI and Workspace Configuration

Configure multi-project Angular workspaces with custom schematics and build targets. Connects to scalable project organisation used throughout the course.

Lesson 2 • TypeScript Advanced Patterns in Angular

Apply generics, decorators, and utility types to Angular code. Strengthens type safety across services, components, and templates.

Lesson 3 • Change Detection Fundamentals

Understand Zone.js-driven and signal-based change detection strategies. Sets the stage for performance optimisation in later chapters.

Lesson 4 • Dependency Injection Deep Dive

Master Angular's hierarchical injector tree and provider scopes. Foundational for building testable, loosely coupled services.

Lesson 1 • Observable Foundations and Creation

Create Observables using factory operators and understand cold vs. hot streams. Establishes the reactive mental model for all subsequent RxJS usage.

Lesson 2 • Error Handling and Retry Strategies

Implement resilient streams using catchError, retry, and retryWhen. Directly applicable to HTTP error recovery and user-facing feedback.

Lesson 3 • Transformation and Filtering Operators

Apply map, filter, switchMap, and related operators to shape data streams. Core to building responsive search, form, and API interaction patterns.

Lesson 4 • Subscription Management and Memory Leaks

Prevent memory leaks using takeUntil, async pipe, and DestroyRef. Critical for long-lived components and services.

Lesson 1 • Host Binding and Host Listener

Manipulate host element properties and events declaratively. Reduces template boilerplate and improves directive encapsulation.

Lesson 2 • Dynamic Components and ViewContainerRef

Instantiate components at runtime using ViewContainerRef and ComponentRef. Powers modal, toast, and plugin-style UI patterns.

Lesson 3 • Component Composition with Signals

Use Angular Signals for fine-grained reactive state within components. Replaces complex Subject chains with simpler, synchronous reactive primitives.

Lesson 4 • Content Projection and ng-content

Use single-slot, multi-slot, and conditional content projection. Enables building flexible UI library components.

Lesson 1 • NgRx Signal Store

Use the modern Signal Store for type-safe, signal-driven global state. Represents the future direction of NgRx state management.

Lesson 2 • NgRx Component Store

Manage local component state with ComponentStore for scoped reactivity. Bridges service-based and global store patterns.

Lesson 3 • NgRx Store Fundamentals

Implement unidirectional data flow with actions, reducers, and selectors. Establishes the NgRx mental model for large-scale state management.

Lesson 4 • Service-Based State with Signals

Build lightweight state containers using injectable services and Signals. Appropriate for small-to-medium apps without full store overhead.

Lesson 1 • Nested Routes and Auxiliary Outlets

Compose complex layouts using child routes and named router outlets. Enables multi-panel and master-detail UI architectures.

Lesson 2 • Route Guards and Authorisation

Protect routes using functional and class-based guards. Implements authentication and role-based access control patterns.

Lesson 3 • Lazy Loading and Code Splitting

Split bundles using lazy-loaded routes and dynamic imports. Directly reduces initial load time for large applications.

Lesson 4 • Router Events and Navigation Lifecycle

Intercept and react to router events for analytics and UX feedback. Provides fine-grained control over navigation transitions.

Lesson 1 • ControlValueAccessor for Custom Inputs

Integrate custom UI components into Angular's form API via ControlValueAccessor. Enables reusable form-compatible widgets.

Lesson 2 • Form Performance and UX Patterns

Optimise large forms with OnPush, debounce, and partial updates. Improves responsiveness and reduces unnecessary re-renders.

Lesson 3 • Dynamic Form Generation

Generate form controls from configuration objects at runtime. Supports schema-driven form UIs common in enterprise applications.

Lesson 4 • Typed Reactive Forms

Use strictly typed FormGroup, FormControl, and FormArray APIs. Eliminates runtime type errors in form value access.

Lesson 1 • Virtual Scrolling and Large Lists

Render large datasets efficiently using CDK virtual scroll. Prevents DOM bloat and maintains scroll performance.

Lesson 2 • Bundle Analysis and Tree Shaking

Analyse and reduce JavaScript bundle size using build tools and code splitting. Directly impacts initial load performance metrics.

Lesson 3 • Change Detection Optimisation

Reduce unnecessary rendering cycles using OnPush and Signals. Foundational to achieving smooth 60fps UI performance.

Lesson 4 • Image and Asset Optimisation

Use NgOptimizedImage and lazy loading for faster visual rendering. Improves Core Web Vitals scores in production.

Lesson 1 • Unit Testing Services and Pipes

Test injectable services and pure pipes in isolation using Jest or Jasmine. Validates business logic independent of the DOM.

Lesson 2 • End-to-End Testing with Playwright

Automate user flows and visual regression using Playwright. Validates integrated application behaviour across routing and state.

Lesson 3 • Testing NgRx Store and Effects

Verify state transitions and side effects using MockStore and marble testing. Isolates store logic from component rendering.

Lesson 4 • Component Testing with TestBed

Render and interact with components in a test host using TestBed. Validates template bindings, outputs, and DOM interactions.