Training Program

Angular Training Program

Master Angular from fundamentals to advanced concepts with our comprehensive curriculum covering Angular 21, TypeScript, RxJS, and modern best practices.

Components

Build a detailed understanding of a component's public interface and its relationship to the rendered DOM. The chapter moves from installation and component anatomy through selectors, styles, inputs, outputs and content projection, then covers lifecycle, queries, host elements, inheritance and programmatic rendering.

2h30

Templates

Connect Angular template syntax to the data and behaviour of a component. Explore bindings, listeners, two-way binding and control flow, then use pipes, template fragments, variables and deferred loading to organise more expressive views. Expression and whitespace rules clarify how templates are interpreted.

2h10

Directives

Understand which responsibilities belong in a component and which can be added through a directive. Compare attribute and structural directives, compose reusable behaviour with the Directive Composition API, and examine image-specific optimisation through NgOptimizedImage. Topics covered: Built-in directives; Attribute directives; Structural Directives; Directive Composition API; NgOptimizedImage.

50 min

Dependency Injection

Follow how Angular resolves a dependency from a provider through an injection context and injector hierarchy. The service examples, lightweight tokens and troubleshooting sections help you reason about scope, configuration and errors when several parts of an application share dependencies. Topics covered: Dependency Injection Overview; Creating and Using Services; Defining Dependency Providers; Dependency Injection Context; Hierarchical Dependency Injection; Lightweight Injection Tokens; DI in Action; Debugging and troubleshooting dependency injection.

1h20

Router

Follow navigation from a route definition to a rendered component and its associated data. The chapter connects loading strategies, outlets, parameters, redirects, guards and resolvers, then extends to lifecycle events, testing, rendering strategies and custom route behaviour.

2h50

Form

Compare reactive, typed, template-driven and signal-based approaches to forms. Work through models, field state, validation, dynamic forms and custom controls, then examine asynchronous operations and migration considerations to choose a form design suited to the interactions being implemented.

2h30

Http

Follow an HTTP operation from client configuration through request creation and response handling. Explore interceptors and reactive loading with httpResource, then use the testing material to check request behaviour without relying on a live backend. Topics covered: Understanding communicating with backend services using HTTP; Setting up HttpClient; Making HTTP Requests; Reactive Data Fetching with httpResource; Intercepting Requests and Responses; Testing HTTP Requests.

1h

Performance & Server-Side Rendering

Distinguish server-side rendering from hydration and incremental hydration. The sections explain how initial HTML and client-side behaviour fit together, helping you reason about rendering choices and when interactive parts of an Angular page are activated. Topics covered: Performance Optimization Overview; Server-Side Rendering (SSR); Hydration; Incremental Hydration.

40 min

Signals

Explore how signals represent state and how dependent values react to changes. Linked signals, resource signals and effects extend the basic model to dependent state, asynchronous work and side effects, with attention to where each mechanism belongs in application logic. Topics covered: Introduction to Signals; Linked Signals; Resource Signals; Effects.

40 min

Testing

Build tests for components, services, directives and pipes, and use debugging and coverage tools to investigate behaviour. The chapter also covers component harnesses and their environments, followed by Vitest migration, Karma and Zone.js utilities for understanding different Angular testing setups.

2h40

Internationalization (i18n)

Follow the translation workflow from installing localize and marking component text to managing translation files and deploying locales. Locale identifiers, data formatting, custom message IDs and global locale variants connect translated wording to the broader localisation of an application.

1h50

Animations

Create enter and leave behaviour and connect Angular's animation integration with CSS animations. The two sections focus on how elements transition into and out of a view and how styling defines the visual effect, rather than a general catalogue of animation libraries. Topics covered: Enter and Leave Animations; CSS Animations.

20 min

Drag and Drop

Work through the Angular CDK's drag-and-drop features and the relationship between draggable items and drop containers. The examples explain interaction configuration and updating application data after a drop, so the visible movement stays consistent with the underlying list state. Topics covered: Drag and Drop with Angular CDK.

10 min

Performance

Investigate runtime cost through change detection, slow computations and unnecessary work in component subtrees. Chrome DevTools profiling, zone-pollution prevention and zoneless applications provide complementary ways to understand what triggers updates and where to focus optimisation. Topics covered: Runtime Performance Optimization; Zone Pollution Prevention; Optimizing Slow Computations; Skipping Component Subtrees; Profiling with Chrome DevTools; Zoneless Angular Applications.

1h

Best Practices

Review decisions that affect the maintainability and reliability of an Angular application: code organisation, security, accessibility and error handling. The update guide completes the chapter by connecting everyday coding conventions with the ongoing maintenance of framework dependencies. Topics covered: Angular Style Guide; Security Best Practices; Accessibility Best Practices; Error Handling Best Practices; Updating Angular Applications.

50 min

Angular CLI

Understand the CLI across local setup, development, builds, deployment and environment configuration. More advanced sections cover builders, schematics and library tooling, while template type checking, AOT compilation and metadata errors explain the diagnostics produced during compilation.

2h30

RxJS

Follow observable execution through observers, subscriptions, operators, subjects and schedulers. Marble testing connects those concepts to time-based assertions, helping you reason about emitted values, completion, cancellation and the behaviour of composed asynchronous streams. Topics covered: Overview; Observer; Operators; Subscription; Subject; Scheduler; Marble Testing.

1h10

NgRx - Store

Trace NgRx data flow from actions through reducers to selectors and consuming views. Feature creators, action groups, meta-reducers and dependency injection extend the basic store model, while runtime checks, DevTools and testing support the inspection and validation of state changes.

2h50

NgRx - Effects

Separate asynchronous work and other side effects from reducers using effect streams. Installation, lifecycle and operator sections explain how effects react to actions, while the testing material helps you verify both emitted actions and the behaviour of asynchronous dependencies. Topics covered: @ngrx/effects; Effects Installation; Testing; Lifecycle; Operators.

50 min

NgRx - Signals

Build signal-based state with SignalStore and SignalState, then add lifecycle hooks, linked state, entities and reusable features. The chapter also examines private members, events, state tracking, testing and RxJS integration to show how store behaviour can be composed as requirements grow.

2h50

NgRx - Entity

Represent collections as entity state and use adapters to perform consistent updates. Entity interfaces, additional state properties and feature-creator integration show how collection operations fit into a larger NgRx feature without duplicating reducer logic for each record type. Topics covered: @ngrx/entity; Installation; Entity Interfaces; Entity Adapter; Additional Entity State Properties Update; Using Entity Adapter with Feature Creator.

1h