Course Outline
-
Module 1: Introduction to Angular 22 and Work Environment (1.5h)
-
Angular v22 philosophy: stabilization, Signals, and performance.
-
Requirements and installation with Angular CLI and Node.
-
Standalone project structure without NgModules (
angular.json,main.ts,app.config.ts,bootstrapApplication). -
Development tools: Angular DevTools and Language Service.
-
Using AI agents in Angular projects.
-
Introduction to Server-Side Rendering (SSR) and its architecture.
-
-
Module 2: Components and Templates (2.5h)
-
Anatomy of standalone components (
@Component,imports). -
Key bindings: interpolation, property binding, and event binding.
-
Modern communication via functions:
input(),output(), andmodel()for two-way binding. -
Modern lifecycle:
OnInitvs. functional hooks. -
ChangeDetectionStrategy.OnPushas the default strategy. -
Practice: Creating a reusable
tarjeta-productocomponent, emitting events to the cart, and listing in the parent component.
-
-
Module 3: Signals: Reactive State (2.5h)
-
Reactivity fundamentals:
signal(),computed(), andeffect(). -
Differences between Writable Signals and read-only signals.
-
Criteria and best practices for adopting Signals.
-
Practice: Implementing a reservation counter with availability calculation using Signals.
-
-
Module 4: Control Flow in Templates (3h)
-
Native control flow syntax:
@if,@else,@for(withtrack), and@switch. -
Local variables in templates using
@let. -
Deferred view loading via Deferrable Views (
@defer). -
Template news and improvements in Angular 22.
-
Practice: Refactoring lists with
@for/@ifand deferring heavy blocks when entering the viewport with@defer.
-
-
Module 5: Dependency Injection (2.5h)
-
The
inject()pattern vs. constructor injection. -
Provision levels:
providedIn: 'root', component, and route. -
Designing services with internal state based on Signals.
-
Practice: Creating a
ReservasServicewith state in Signals consumed by multiple components.
-
-
Module 6: Routing (3h)
-
Standalone route configuration (
provideRouter,Routes). -
Navigation strategies: child routes, parameters, and lazy loading.
-
Route protection using functional Guards.
-
Handling
RouterLink,RouterOutlet, and programmatic navigation. -
Practice: Full routing of the reservation app (list, lazy-loaded detail by ID, and protected route).
-
-
Module 7: Forms: Signal Forms (2.5h)
-
Signal-based reactive forms (stabilized in v22).
-
Declarative definition and integrated validations.
-
Creating custom validations and error handling.
-
Practice: Building the "new reservation" reactive form.
-
-
Module 8: HTTP Client and Http Resources (2.5h)
-
Configuration with
provideHttpClient()and afetch-based engine. -
Creating and using functional interceptors.
-
Consuming REST APIs, handling errors with Observables and Promises.
-
Practice: Connecting the list to a remote REST API with an authentication interceptor and error handling.
-
Requirements
-
Solid knowledge of HTML, CSS, and JavaScript (ES6+).
-
Basic or intermediate familiarity with TypeScript.
-
Basic knowledge of using the terminal/command line.
Who is this course for?
-
Web and software developers who want to upgrade to Angular version 22.
-
Frontend programmers interested in mastering reactive state with Signals and the new template syntax.
-
Software architects looking to implement modern web projects with standalone components and SSR.
Custom Corporate Training
Training solutions designed exclusively for businesses.
- Customized Content: We adapt the syllabus and practical exercises to the real goals and needs of your project.
- Flexible Schedule: Dates and times adapted to your team's agenda.
- Format: Online (live), In-company (at your offices), or Hybrid.
Price per private group, online live training, starting from 4350 € + VAT*
Contact us for an exact quote and to hear our latest promotions
Testimonials (2)
all the important part were covered
carlo capuano - ITER Organization
Course - Angular 18
The trainer’s attitude – helping you feel comfortable, making jokes to lighten the mood, and answering everyone’s questions.
