Front-end web development
Modern Angular: signals, components and forms
Develop with recent versions of Angular: signals, standalone components, services, forms and tests.
- Duration
- 21 h · 3 days
- Level
- Intermediate
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program presents the current way of developing with Angular: project architecture, signals for reactivity, standalone components, services and HTTP requests, reactive forms, routing and tests. It also shows how AI assistants can speed up the work without degrading code quality.
Who this program is for
- Front-end web developers
- Java or .NET developers discovering Angular
- Teams modernizing an existing Angular application
Prerequisites
- Good command of HTML, CSS and JavaScript
- Notions of TypeScript appreciated
Learning objectives
- Create an Angular project and understand its architecture
- Use signals to manage reactivity
- Write standalone components and manage their communication
- Create services and call a backend
- Build reactive forms
- Set up routing
- Test the application and use AI tools
Detailed curriculum
6 modules · 21 h · 3 days
Day 1
Architecture and first project
50% theory · 50% practice
- Command-line tool and project structure
- Components, templates and data binding
- Working without Zone.js
- Configuration and build
- Naming best practices
Signals and reactivity
30% theory · 70% practice
- Principle of signals
- signal, computed and effect
- Signal-based inputs and outputs
- Comparison with previous approaches
- Common pitfalls
🛠 Hands-on workshops
Counters and reactive lists1.5 h
Build a small application that is fully reactive with signals.
✅ Deliverable : A reactive application
Day 2
Standalone components and templates
30% theory · 70% practice
- Standalone components and imports
- New control flow syntax
- Parent-child communication
- Content projection
- Styles and encapsulation
🛠 Hands-on workshops
Component library1.5 h
Create several reusable components.
✅ Deliverable : A set of documented components
Services, HTTP and backend access
30% theory · 70% practice
- Dependency injection
- Creating and using services
- HTTP requests and interceptors
- Error and loading handling
- Typing API responses
🛠 Hands-on workshops
API client1.5 h
Connect the application to a demo API.
✅ Deliverable : An application fed by an API
Day 3
Forms
30% theory · 70% practice
- Reactive forms: groups, controls, validators
- Custom validators and messages
- Introduction to signal-based forms
- Dynamic forms
- Form accessibility
🛠 Hands-on workshops
Sign-up form1.5 h
Create a complete form with validations.
✅ Deliverable : A validated, accessible form
Routing, testing and AI-assisted development
30% theory · 70% practice
- Routes, parameters and lazy loading
- Guards and resolvers
- Unit testing with Vitest
- AI tools for Angular: scope and limits
- Pre-production checklist
🛠 Hands-on workshops
Final application2 h
Finalize the application with routes, tests and review.
✅ Deliverable : A tested application
Tools and technologies
AngularNode.jsTypeScriptVisual Studio Code
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor and Node.js installed
Resources provided
- Course materials and repository of corrected exercises
Career outcomes
- A complete Angular application
- A clear understanding of the framework's recent changes
- Structure and testing best practices