Angular
Solid foundations for developing applications with Angular
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
Topics covered
- →IDE Configuration: Webstorm vs Vscode
- →Global architecture of an Angular application
- →module
- →components
- →The different bundler and executor modules
- →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
- →The different lifecycle hooks of a component
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
- →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 on 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
- →Child-Parent Communication
- →The @Output annotation
- →Emitting data using emit
- →Making an Output fully reactive
Activities
Create a customizable component using Input and Output
Topics covered
- →Services in Angular
- →The @Injectable annotation
- →Different ways to register a service
- →Injecting its 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 a treatment at the application's initialization
Topics covered
- →Introduction to Pipes
- →What are Pipes?
- →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 if no value exists
Topics covered
- →Introduction to directives
- →What are directives?
- →The different types of directives
- →The different selectors for 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
- →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
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 are guards?
- →What are guards 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
- →What are they?
- →ng-template
- →ng-container
- →ng-content
- →ngTemplateOutlet
- →ngComponentOutlet
- →Template annotations
- →What are they?
- →How and when to use them?
- →@ViewChild and @ViewChildren
- →@ContentChild and @ContentChildren
- →Binding annotations
- →What are they?
- →@HostListener
- →@HostBinding
- →Structural directives
- →What are structural directives 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 are they?
- →How to use them?
- →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
Activities
Demonstration by the instructor.
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 its components
- →Testing its services
- →Testing its directives
- →Testing its 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
- →A world without modules
- →Standalone components
- →Injection bubbling
- →Bootstrapping
- →The Inject function
- →the composition API
- →class-based guards
- →class-based interceptors
Activities
Transform a complete application to standalone format without forgetting to adapt the tests
Topics covered
- →What are Signals
- →Signals and Rxjs interoperability
- →Input and Output Signals
Activities
Transform the application to use only signals
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