ANGULAR

Angular

Angular is more than just a popular framework — it's the backbone of enterprise web applications worldwide. In 2026, as AI-powered development tools become essential to productivity, this training goes beyond teaching you Angular syntax.

Our expert trainers (Google Developer Experts, Angular framework contributors, and NG-ZORRO maintainers) will teach you to leverage LLM tools like Claude to accelerate your development. But here's the critical difference: **using an LLM doesn't mean blindly accepting generated code**. This training emphasizes understanding every line produced, ensuring you can debug, optimize, and maintain applications effectively.

Whether you're a frontend developer or full-stack engineer, you'll learn to:

Build robust, scalable Angular applications with modern patterns (signals, standalone components, composable architecture)
Write tests with 100% coverage to ensure long-term maintainability
Master the Angular ecosystem (dependency injection, routing, forms, state management with NgRx Signal Store)
Be productive with AI-assisted development while maintaining full comprehension of your codebase

By the end, you'll have hands-on experience with a complete staff directory application built progressively across exercises, passing Angular Training Level 1 & 2 certifications, and most importantly—gaining the expertise to build production-grade applications that last.

✓ Official training SFEIR InstituteLevel Intermediate⏱️ 4 days (28h)

What you will learn

Develop production-ready Angular applications using modern patterns
Leverage LLM tools for productivity while understanding and maintaining generated code
Write comprehensive unit tests ensuring 100% coverage and long-term maintainability
Master the Angular ecosystem as a whole (DI, routing, forms, state management, testing)

Prerequisites

Modern JavaScript (scope, arrow functions, classes, 'this' concept, asynchronous programming with promises)
Basic TypeScript knowledge (type basics, interfaces)
Understanding of Observables vs Promises

Target audience

Frontend developers, Full-stack JavaScript / Node.js developers, Web developers building or maintaining Angular applications, Developers seeking to master modern Angular with AI-assisted workflows

Training Program

33 modules to master the fundamentals

Course 1 : Day 1: Foundation & First Hands-On with Angular Essentials

Objectives

Set up an Angular development environment with modern tooling (IDE, CLI, build system)
Bootstrap new Angular projects with proper configuration and Material integration
Use Angular CLI commands effectively for daily development workflows

Topics covered

→IDE Configuration: WebStorm vs VS Code
→Angular Installation and project initialization
→Angular Material integration
→CLI commands and modern development workflow
→Build system and module bundlers

Activities

Bootstrap an Angular application

Create your first component using the CLI

Set up development environment

Objectives

Understand component structure and create components using modern standalone patterns
Use template interpolation and expressions to display dynamic data
Master component bootstrapping and lifecycle phases

Topics covered

→Component architecture and structure
→Standalone components vs NgModules
→Template interpolation and expressions
→Component bootstrapping
→Component lifecycle

Activities

Create nested components

Understand component communication basics

Objectives

Design and build hierarchical component structures for complex applications
Implement parent-child component relationships and application architecture patterns

Topics covered

→Building component trees
→Parent-child component relationships
→Application architecture patterns

Activities

Build a component hierarchy for a staff directory

Objectives

Master the Signal reactivity system and create reactive templates with computed values
Apply different data binding types (interpolation, property, event, two-way) appropriately
Optimize template performance using signals and NgOptimizedImage

Topics covered

→Signal reactivity system (signals, computed, effect)
→Data binding types (interpolation, property, event, two-way)
→Property vs attribute binding
→Template variables
→NgOptimizedImage for performance

Activities

Display dynamic data using signals

Create reactive templates with proper binding

Objectives

Handle user interactions and events effectively using Angular's event binding syntax
Implement two-way data binding with ngModel for form controls
Understand event propagation and build responsive user interaction patterns

Topics covered

→Event binding syntax
→Event objects and propagation
→Two-way binding with ngModel
→User interaction patterns

Activities

Handle button clicks and form inputs

React to user interactions with signals

Objectives

Implement component lifecycle hooks for initialization and cleanup
Manage resources effectively using OnDestroy and proper cleanup patterns
Use signal-based initialization patterns for modern Angular applications

Topics covered

→Component lifecycle phases
→OnInit, OnDestroy, OnChanges hooks
→Cleanup and resource management
→Signal-based initialization patterns

Activities

Implement lifecycle hooks for data initialization

Objectives

Create reusable components using @Input and @Output decorators
Implement parent-child communication patterns through inputs and output events
Use signal-based inputs/outputs for modern, type-safe component communication

Topics covered

→Component inputs (@Input decorator)
→Component outputs (@Output decorator)
→Event emission patterns
→Input validation and required inputs
→Signal-based inputs and outputs

Activities

Create customizable components with inputs

Build parent-child communication patterns

Objectives

Use built-in Angular pipes to format data in templates
Create custom pipes to extend template functionality
Apply pipes effectively with composition and chaining for data transformation

Topics covered

→Built-in pipes (date, currency, uppercase, lowercase, etc.)
→Pure vs impure pipes
→Creating custom pipes
→Pipe composition and chaining

Activities

Format dates and values with pipes

Create a custom default-value pipe

Objectives

Create and use services with Angular's Dependency Injection system
Understand service registration and injection scopes for application-wide functionality
Implement proper service initialization patterns and hierarchies

Topics covered

→Services and the @Injectable decorator
→Service registration and providers
→Injecting services into components
→Injection scopes and hierarchies
→Service initialization patterns

Activities

Create and use your first service

Perform application-level initialization

Objectives

Use built-in directives to control DOM structure and styling
Create custom attribute directives to extend element behavior
Implement directive communication patterns using host bindings and ElementRef

Topics covered

→Attribute directives vs structural directives
→Built-in directives (ngIf, ngFor, ngSwitch)
→Directive selectors and API
→ElementRef and DOM manipulation
→Host bindings and listener decorators

Activities

Create custom attribute directives

Use built-in directives effectively

Course 2 : Day 2: Building Interactive Applications with Forms & Routing

Objectives

Configure and implement routing in Single Page Applications
Navigate between routes using both template and programmatic approaches
Pass and retrieve data through route parameters and query strings

Topics covered

→Routing philosophy in Single Page Applications
→Route configuration and definitions
→Router outlets and navigation
→URL patterns and parameters
→Navigation methods (routerLink, Router service)

Activities

Configure basic routing

Navigate between routes

Pass data through route parameters

Objectives

Use modern Angular control flow syntax (@if, @for, @switch) for rendering logic
Render dynamic lists efficiently with optimal performance
Migrate from legacy structural directives to modern control flow syntax

Topics covered

→New Angular control flow (@if, @for, @switch)
→Built-in structural directives (*ngIf, *ngFor, *ngSwitch)
→Conditional rendering patterns
→List rendering and performance
→Migration from legacy to new syntax

Activities

Render dynamic lists with @for

Handle conditional UI with @if/@switch

Objectives

Fetch data from REST APIs using HttpClient and HTTP resources
Handle HTTP responses and errors gracefully in applications
Bridge Observables and Signals for reactive data loading patterns

Topics covered

→HttpClient setup and usage
→HTTP methods (GET, POST, PUT, DELETE)
→HTTP resources for reactive data loading
→Response types and error handling
→Bridging Observables and Signals (toSignal, resource)

Activities

Fetch data from a REST API

Display server data reactively

Handle HTTP errors

Objectives

Build template-driven forms with validation and error display
Implement form state management and submission handling
Use built-in validators to ensure data integrity

Topics covered

→FormsModule and ngModel directive
→Form state and validation
→User feedback and error display
→Form submission handling
→Built-in validators

Activities

Create a person creation form

Implement form validation

Display validation error messages

Objectives

Build complex reactive forms using FormGroup and FormControl
Implement custom validators for domain-specific validation rules
Create reusable form components with reactive patterns

Topics covered

→ReactiveFormsModule and FormControl/FormGroup
→Programmatic form building
→Form validation patterns
→Custom validators
→Standalone reactive forms (no NgModule)

Activities

Build forms with FormGroup/FormControl

Implement complex validation logic

Create reusable form components

Objectives

Build modern forms using Angular's signal-based form API
Implement type-safe form handling with signals for better developer experience
Create custom form controls with signal-based composition patterns

Topics covered

→Signals-based form API
→Field directive and form composition
→Form state management with signals
→Validation with signal forms
→Type-safe form handling

Activities

Build forms using the modern signal form API

Implement validation patterns

Create custom form controls

Objectives

Evaluate and choose the appropriate form approach for different use cases
Migrate existing forms between template-driven, reactive, and signal-based approaches
Optimize form performance based on project requirements

Topics covered

→Template-driven vs Reactive vs Signal forms
→When to use each approach
→Migration strategies
→Performance considerations

Activities

Compare different form approaches

Choose the right form strategy for your use case

Objectives

Combine routing with reactive data loading for seamless navigation
Master signal composition patterns for complex reactive scenarios
Implement complete CRUD workflows with reactive data flow

Topics covered

→Combining routing with data loading
→Signal composition patterns
→linkedSignal for computed dependencies
→RxMethod and async operations
→Complete CRUD workflows

Activities

Build a detail/edit page with routing

Implement full CRUD operations

Master reactive data flow

Course 3 : Day 3: Advanced Patterns & Architecture

Objectives

Implement lazy loading and code splitting for optimal bundle size
Configure nested routing structures with child routes and feature modules
Optimize application performance using preloading strategies

Topics covered

→Lazy loading and code splitting
→Feature modules and routing
→Child routes and nested routing
→Route parameters and query strings
→Route preloading strategies

Activities

Implement lazy-loaded feature modules

Configure child routes

Optimize bundle size with lazy loading

Objectives

Implement route guards to protect routes based on authentication and authorization
Use guard chaining and composition for complex access control scenarios
Handle route redirection and prevent unsaved changes with guards

Topics covered

→Guard types (CanActivate, CanDeactivate, CanMatch)
→Functional guard syntax
→Authentication and authorization guards
→Route redirection patterns
→Guard chaining and composition

Activities

Implement authentication guards

Protect routes based on user roles

Handle unsaved changes

Objectives

Implement resolvers to pre-load data before route activation
Bind resolver data to component inputs for seamless data flow
Handle resolver failures gracefully with error handling patterns

Topics covered

→Resolver pattern and pre-loading data
→Resolver implementation
→Functional resolvers
→Component input binding with resolvers
→Error handling in resolvers

Activities

Implement resolvers for route data

Load data before component initialization

Handle resolver failures gracefully

Objectives

Implement HTTP interceptors for cross-cutting concerns (auth, logging, error handling)
Transform requests and responses globally using interceptor chains
Handle errors and implement retry logic at the interceptor level

Topics covered

→Interceptor pattern and use cases
→Request/response transformation
→Error handling and retry logic
→Authentication token injection
→HTTP context for conditional behavior

Activities

Create an authentication interceptor

Implement request caching

Handle HTTP errors globally

Objectives

Use content projection to create flexible and reusable components
Implement named slots for multiple content projections
Build transparent wrapper components with signal-based projection patterns

Topics covered

→ng-content for component composition
→Named slots and multiple projections
→Transparent wrapper components
→Signal-based projection patterns
→Loading states and overlays

Activities

Create a reusable overlay component

Use content projection for flexibility

Build loading state patterns

Objectives

Create generic components using ngTemplateOutlet for dynamic template rendering
Use ViewChild to query and interact with template references
Build highly composable components through template-driven composition

Topics covered

→ng-template for reusable templates
→ng-container for logical grouping
→ngTemplateOutlet for dynamic templates
→ViewChild and template references
→Content queries and generics

Activities

Create generic list components

Implement template-driven composition

Use ViewChild for component interaction

Objectives

Create custom structural directives for advanced DOM manipulation
Use TemplateRef and ViewContainerRef for imperative component instantiation
Master directive composition patterns for complex template logic

Topics covered

→Structural directive syntax (*directive)
→TemplateRef and ViewContainerRef
→Creating custom structural directives
→Imperative component creation
→Directive composition patterns

Activities

Create a custom structural directive

Implement conditional component instantiation

Master advanced templating patterns

Course 4 : Day 4: Testing, State Management & Advanced Topics

Objectives

Write comprehensive unit tests for Angular components, services, and directives
Achieve 100% code coverage with effective testing strategies
Mock HTTP calls and dependencies using Angular testing utilities

Topics covered

→Testing tools and setup (Vitest, Angular testing utilities)
→Testing components with TestBed
→Component testing strategies
→Testing services and HTTP calls
→Testing directives and pipes
→Angular Testing Library for realistic testing
→Mocking and test doubles
→Test coverage and best practices

Activities

Write comprehensive component tests

Test services with mocked HTTP

Achieve 100% code coverage

Objectives

Design and implement scalable state management using NgRx Signal Store
Manage complex state mutations, derived state, and async operations
Test store-backed applications with proper isolation and mocking

Topics covered

→State management patterns and principles
→NgRx Signal Store vs classic NgRx
→Creating and providing stores
→State selectors and computed values
→withComputed for derived state
→withProps for parameterized actions
→withMethods and patchState for mutations
→RxMethod for async operations
→Store hooks for initialization
→Route-scoped providers
→Entity management patterns
→Testing store-based components

Activities

Build a complete store for staff directory

Implement complex state mutations

Manage async side effects with RxMethod

Test store-backed applications

Objectives

Optimize application performance using OnPush change detection strategy
Build zoneless applications with improved performance and less JavaScript overhead
Debug change detection issues and monitor performance implications

Topics covered

→Change detection mechanism
→OnPush strategy for optimization
→Zoneless applications
→Performance implications
→Debugging change detection

Activities

Optimize with OnPush strategy

Build zoneless applications

Objectives

Transform Angular applications into Progressive Web Apps with offline support
Implement Service Workers for caching strategies and background operations
Enable offline-first patterns for improved user experience

Topics covered

→PWA fundamentals and benefits
→@angular/pwa package integration
→Service Worker basics
→Service Worker communication
→Caching strategies
→Offline-first patterns

Activities

Add PWA capabilities to an Angular app

Implement service worker communication

Objectives

Set up Server-Side Rendering for improved performance and SEO
Implement server-compatible code patterns and handle hydration properly
Optimize rendering strategies for different deployment scenarios

Topics covered

→SSR benefits and use cases
→Rendering modes (development, production, prerendering)
→Server-compatible code patterns
→HTTP and hydration
→Performance considerations
→SEO optimization

Activities

Set up SSR for an Angular app

Handle server-side data fetching

Optimize hydration

Objectives

Create and structure publishable Angular libraries for code reuse
Build, package, and distribute Angular libraries to npm
Manage dependencies and versioning for library maintainability

Topics covered

→Creating publishable libraries
→Library project structure
→Building and packaging with ng-packagr
→Dependency management
→Asset management in libraries
→Documentation and versioning
→Publishing to npm

Activities

Create a shared component library

Build and publish an Angular library

Objectives

Design and implement micro-frontend architectures using Native Federation
Share dependencies efficiently between host and remote applications
Enable seamless communication between independent micro-frontend applications

Topics covered

→Micro-frontend architecture
→Module Federation concepts
→Host and remote applications
→Dependency sharing
→Communication between micro-frontends
→Native Federation (Angular-specific)

Activities

Set up a micro-frontend architecture

Share dependencies between applications

Objectives

Optimize application performance to meet Core Web Vitals standards
Implement lazy loading and deferred views for faster initial load times
Monitor and analyze performance metrics for continuous improvement

Topics covered

→Core Web Vitals and metrics
→Image optimization strategies
→Lazy loading components at runtime
→Deferred views for below-the-fold content
→Bundle analysis and optimization
→Performance monitoring

Activities

Optimize images for web

Implement lazy-loaded components

Defer non-critical views

Related Trainings

RxJS Reactive Programming

Solid foundations to master reactive programming

2 d

Fundamental

TypeScript

Solid foundations for developing applications in TypeScript

1 d

Fundamental

PWA – Progressive Web Applications

Solid foundations for developing progressive web applications.

2 d

Intermediate

View all trainings →

Upcoming sessions

November 2, 2026

Distanciel • Français

Quality Process

SFEIR Institute's commitment: an excellence approach to ensure the quality and success of all our training programs. Learn more about our quality approach

Teaching Methods Used

Lectures / Theoretical Slides — Presentation of concepts using visual aids (PowerPoint, PDF).
Technical Demonstration (Demos) — The instructor performs a task or procedure while students observe.
Guided Labs — Guided practical exercises on software, hardware, or technical environments.

Evaluation and Monitoring System

The achievement of training objectives is evaluated at multiple levels to ensure quality:

Continuous Knowledge Assessment : Verification of knowledge throughout the training via participatory methods (quizzes, practical exercises, case studies) under instructor supervision.
Progress Measurement : Comparative self-assessment system including an initial diagnostic to determine the starting level, followed by a final evaluation to validate skills development.
Quality Evaluation : End-of-session satisfaction questionnaire to measure the relevance and effectiveness of the training as perceived by participants.

Registration

3,160 € excl. VAT per learner

Reserve a seat

Train multiple employees

Volume discounts (multiple seats)
Private or custom session
On-site or remote

Request a quote

3,160€ excl. VAT

per learner

Reserve Quote

Angular

What you will learn

Prerequisites

Target audience

Training Program

Course 1 : Day 1: Foundation & First Hands-On with Angular Essentials

Setup & Environment

Objectives

Topics covered

Activities

Components Fundamentals

Objectives

Topics covered

Activities

Component Hierarchy

Objectives

Topics covered

Activities

Reactivity & Data Binding

Objectives

Topics covered

Activities

Event Handling

Objectives

Topics covered

Activities

Lifecycle Hooks (Bonus)

Objectives

Topics covered

Activities

Input & Output Communication

Objectives

Topics covered

Activities

Pipes

Objectives

Topics covered

Activities

Dependency Injection Fundamentals

Objectives

Topics covered

Activities

Directives

Objectives

Topics covered

Activities

Course 2 : Day 2: Building Interactive Applications with Forms & Routing

Router Basics

Objectives

Topics covered

Activities

Control Flow

Objectives

Topics covered

Activities

HTTP & Data Fetching

Objectives

Topics covered

Activities

Template-Driven Forms

Objectives

Topics covered

Activities

Reactive Forms

Objectives

Topics covered

Activities

Signal Forms (Modern)

Objectives

Topics covered

Activities

Forms Summary & Comparison

Objectives

Topics covered

Activities

Reactive Thinking Patterns

Objectives

Topics covered

Activities

Course 3 : Day 3: Advanced Patterns & Architecture