Angular
Angular is a framework released in September 2016. Adopted by the largest enterprises, this framework offers developers an ecosystem that enables them to create robust, reliable, and easily scalable web applications over the long term, quickly while focusing on business logic.
This training, written by our expert and qualified trainers on the technology (certified Angular Developer Level 2 & 3, Google Developer Expert, and framework contributors), will provide you with comprehensive training tailored to your needs, allowing you to acquire the necessary knowledge (from beginner to complete expertise) to build robust, scalable, and maintainable applications over time.
Libraries (NgRx, NgXs) and testing occupy a large part of the Angular ecosystem, so some modules will be strongly oriented towards these, and all exercises seen during the training will be tested with 100% test coverage.
Participants in this training will be able to pass the Level 1 and Level 2 certification from Angular Training and obtain the associated vouchers through SFEIR.
What you will learn
- Develop an Angular application
- Perform tests to ensure long-term maintainability
- Understand the Angular ecosystem as a whole (external libraries)
Prerequisites
- Modern Javascript (scope, arrow function, class, 'this' concept, asynchronous programming with promises)
- Basic knowledge of Typescript (basic typing)
- Understanding of what an Observable vs a Promise is
Target audience
- Frontend developers, Full-stack JavaScript / Node.js developers, Web developers interested in developing an Angular application, Anyone interested in developing an Angular application
Training Program
22 modules to master the fundamentals
Course 1 : Discovering a new framework and first hands-on experience with the framework foundations
Topics covered
- →IDE Configuration: Webstorm vs Vscode
- →Global architecture of an Angular application (module, components, module-less architecture)
- →The different bundlers and executors
- →Modern approach to using the CLI
- →CLI basics
Activities
Bootstrap an Angular application
Create your first component using the CLI
Nest components
Topics covered
- →DataBinding (the different types of databindings, difference between property and attribute)
- →Signals and reactivity (understanding Signals and their interest, modifying a Signal, using a Signal)
- →The different lifecycle hooks of a component
- →The different hooks of a component
- →Signal derivation (synchronous derivation, asynchronous derivation)
Activities
Display a person in a card
React to a button click event to display another person randomly
Topics covered
- →Angular's Http client (different ways to register the HttpClient, different methods of the Http client, different possible response types, httpResource when and how to use it)
- →Understanding how to read Marble diagrams
- →Understanding the basic operators of RxJs
Activities
Make a server call to display a person
Make a server call on a button click event
Topics covered
- →Understanding routing (the philosophy of routing in a CSR-type app, the basic configuration of routing in Angular)
- →Configuring a routing
- →Navigating in your application
Activities
Set up a routing system within an Angular application
Navigate by default to a route
Navigate to a specific route
Topics covered
- →Built-in structural directives (ngIf, ngFor, ngSwitch)
- →Angular's new code flow (@if, @for, @switch)
Activities
Using the *ngFor directive to create a view of a list of people
Topics covered
- →Parent - Child Communication (the @Input annotation, annotation configuration, reactive transformation of an Input, making an input required, Input based Signals)
- →Child - Parent Communication (the @Output annotation, emitting data using emit, making an Output fully reactive, Output based Signals)
Activities
Create a customizable component using Input and Output
Course 2 : Towards more advanced concepts of the framework but vital for creating more advanced applications with forms and richer UIs
Topics covered
- →Services in Angular (the @Injectable annotation, different ways to register a service, injecting your service, injection bubbling, injection configuration)
- →How Dependency Injection works in Angular (the role of the Injector, the role of the DI Token, the role of the Provider, different value resolutions for injections)
Activities
Create and use your own service
Perform processing at application initialization
Topics covered
- →Introduction to Pipes (what is a Pipe?, what are they for?, Pure Pipes, Impure Pipes, the different built-in pipes in Angular)
- →Creating your own pipes
Activities
Format a date correctly using the date pipe
Create your own pipe to display a default value when no value exists
Topics covered
- →Introduction to directives (what is a directive, the different types of directives, the different selectors of a directive)
- →Interacting with DOM elements (the ElementRef class, the Renderer class)
Activities
Use the ngSwitch directive
Use the new control flow ngSwitch
Create a directive that displays an icon based on a condition
Topics covered
- →Forms (why forms, the different types of forms)
- →Template driven forms (the FormsModule module, the ngForm / ngModel directives, deep dive into the ngModel code, validation, user feedback on validation errors)
- →Reactive forms (the ReactiveFormsModule module, the FormGroup and FormControl directives, validation, standalone reactive forms)
- →Signal forms (experimental) (declaring and initializing a signal Form, the Field Directive, validation)
- →Custom validation
Activities
Create a person creation form (template driven)
Create a person update form (template driven)
Make forms reactive
Create your own validator
Make forms standalone
Refactoring to Signal Form
Course 3 : Angular expertise concepts
Topics covered
- →Lazy loading (what is lazy loading, what is lazy loading for, how to lazy load a module, the concept of child routes)
- →Guards (what is a guard, what is a guard for, the different guards and their usage)
Activities
Set up lazy loading
Set up a guard
Set up a resolver
Topics covered
- →The Interceptor (what is an Interceptor?, what is an interceptor for?, in which case do we need it?, how to write and register an interceptor)
- →The HTTP context (what is it?, how and when to use it)
Activities
Set up an interceptor
Set up an HTTP cache context
Topics covered
- →Template directives (ng-template, ng-container, ng-content, ngTemplateOutlet, ngComponentOutlet)
- →Template annotations (@ViewChild and @ViewChildren, viewChild and viewChildren Signals, @ContentChild and @ContentChildren, contentChild and contentChildren Signals)
- →Binding annotations (@HostListener, @HostBinding, using the host property of the annotation)
- →Structural directives (what is a structural directive for, the micro syntax of a structural directive, the limits of this syntax)
Activities
Teleport a template
Enhance a directive with an event listener and style binding
Write your first structural directive
Topics covered
- →ControlValueAccessor (what is it?, how to use it?, the different Hooks)
- →NgValidators (what is it?, how to use it?, the different Hooks)
Activities
Create your own form element
Topics covered
- →How a change detection cycle works (in development, in production)
- →The different change detection modes (Default, OnPush)
- →Zoneless
Activities
Demonstration by the instructor
Course 4 : State Management, Testing and advanced topics
Topics covered
- →State management (what is it?, why use it, when to use it)
- →NgRx (the store, the reducer, the actions, the selectors, the effects)
- →NgXs (the store, the actions, the selectors)
Activities
Set up a state with NgRx
Set up a state with NgXs
Topics covered
- →Testing in Angular
- →Testing components
- →Testing services
- →Testing directives
- →Testing pipes
- →Introduction to the Angular testing library
Activities
Unit test an application from end to end
Topics covered
- →What is a PWA?
- →How to integrate the @angular/pwa package
- →Caching strategies from the @angular/pwa package
Topics covered
- →What is server-side rendering?
- →What is prerendering?
- →How to integrate server-side rendering?
- →How to hydrate your Angular application
Topics covered
- →Creating a library in Angular
- →Building your library
- →Asset management in the library
- →Best practices and pitfalls by a maintainer of Ng Zorro
Topics covered
- →Microfrontend Architecture
- →Difference between host and remote
- →Initiating a host
- →Initiating a remote
- →Communication between host and remote
- →Sharing dependencies between host and remote
Topics covered
- →What are Core Web Vitals
- →Lazy loading components at runtime
- →Deferring a part of your view
Activities
Lazy load a modal component
On-demand loading of a part of your view
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
- 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.
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.
Train multiple employees
- Volume discounts (multiple seats)
- Private or custom session
- On-site or remote