Angular Courses

Angular Fundamentals 2 days Advanced Angular 2 days Unit Testing 0.5 day RxJS Workshop 1 day Angular Architecture Workshop 18h Advanced Angular Testing 13h

Organize a private Corporate Training customized for your group!
We offer to tailor the content to fit your team's preferences and expectations at no additional cost.

2 days to jump start with Angular

🎓 Master Angular concepts to create complex data-centric web app
🔥 2 days of intensive hands-on training
👨‍💼 Instructor-led LIVE online course!
💼 Available as private team/corporate training as well
>> View schedules

This immersive instructor-led workshop covers all the core concepts and guides you to build a full Angular data-centric business application, including the role of TypeScript, project setup, code structure, style guide, using the Angular CLI, data binding, async requests to a REST API through services, observables, and routing. Angular Academy is the ideal starting point to understand and use Angular 17 effectively now. You'll experience several demos and "code along" activities and be provided with the code throughout the workshop, as you learn how to build apps using Angular 17, with plenty of interactivity with the instructor.

Day 1

TypeScript fundamentals
- The TypeScript compiler
- Type safety with type annotations
- Classes and Interfaces
- Generics
Setup and Tooling
Getting started with the Angular CLI
- Popular commands and schematics
Introduction to Angular
Structure of an app
Components Model
- Decorators, Templating Syntax, Data Binding, Directives, Input/Output, Events, Pipes, Encapsulation
New Control Flow syntax
- @if, @for and @switch
- @defer block
Services and Dependency Injection
- Organizing app logic into services
- The inject() function
Reactive Programming with RxJS (Observables)
- Understanding RxJS and its use with Angular
- Subscribe() function
- The async pipe
- Pipe() function
- Using popular RxJS operators
- RxJS best practices
- Handling errors in RxJS code
Async Requests to a REST API (HTTP)
- The HttpClient service
- A first async GET request
- Consume an Observable response
Implementing a local cache with ShareReplay()

Day 2

Debugging an application
- Configuring the debugger and breakpoints
- The Angular DevTools extension
Implementing pagination, sorting and filtering on a list
Standalone Components
Deployment
- Optimizations for production
- ng build and ng deploy commands
Migrating a project to a new version of Angular
Navigation and Routing
- Using the Angular Router
- routerLink directive
- The router-outlet placeholder
- Router service
- Nested routes
- Route parameters
- Handling routing errors
Lazy-loading
Forms and Validation
- Creating Forms
- Validation API
- POST Http request
Using HttpClient to Update or Delete data on the server
- PUT and DELETE Http requests
Authentication
- Login component
- Authentication Service
- Security with JSON Web Tokens (JWT)
- Http Interceptors
- Protecting access to components with Route Guards
Best Practices (Linting, Style Guide, …)
Final QnA

Note: we can also work with you to tailor the content for corporate training (on-site or online) to fit your team's preferences and expectations. Optional topics could be: Bootstrap, Material Design, Firebase, Unit testing, e2e testing, Ionic, NgRx, Progressive Web App (PWA), Internationalization and localization, accessibility, Server-side rendering, ...

2 days to Master Angular

🎓 Master advanced Angular concepts to create complex data-centric app
🔥 2 days of intensive hands-on training
👨‍💼 Instructor-led LIVE online course!
💼 Available as private team/corporate training as well
>> View schedules

This is an intensive instructor-led workshop that covers advanced topics dedicated to people who are already familiar with Angular and TypeScript! This workshop is very hands-on and you'll have the chance to work on an Angular data-centric business application with plenty of interactivity with the instructor.

Day 1

Advanced Routing
- Lazy Loading
- Preloading Modules
- Diagnostic with traces
- Auxiliary routes
- Routes Transitions
- Protect routes access with Guards
- Route Resolver
- Setting metadata for SEO
- Router events
Complex Error Handling
- Global Error Handler
- Managing different types of errors: Code, Navigation, Http
- Error Service, offline mode and log to server
- Http Errors Interceptor with auto retry for failed requests
- Notification Service: using an RxJS Subject to stream messages and display toast notifications
Optimizing performance
- Exploring different techniques to improve your apps and make them run fast and smooth:
- Bundling, Minification, dead code elimination, enableProdMode()
- Performance for Data Binding with OnPush
- Profiling an app performance
- Web Workers to improve responsiveness
- Profiling runtime performance
- Using bundle analyzer
- Virtual Scrolling
- Improve ngFor with trackBy
- Caching with Service Worker
- Progressive Web App (PWA)

Day 2

Advanced RxJS
- RxJS and Reactive Programming
- Data Composition with Observables
- Most important RxJS operators
- Using Subjects (BehaviorSubject, ReplaySubject)
- Introduction to Higher-order Mapping Operators (switchMap, flatMap, ...)
Modern State Management with Redux and ngrx
- Why Redux ?
- Introduction to the ngrx platform
- Setting up ngrx store
- Stateful vs stateless components
- Immutability and performance
- Ngrx error handling
- Managing the router state in the store
- Async actions with ngrx effects
- Removing boilerplate with ngrx entity
- Live debugging and time travelling with ngrx DevTools
- NgRx Data
Server-side rendering
- Improving performances and SEO
- Hydration
- Static Site Generation
Final QnA

Testing Angular Like A Pro!

🎓 Learn how to write Unit Tests
🔥 3.5 hours of technical hands-on training
👨‍💼 Instructor-led LIVE online course!
💼 Available as private team/corporate training as well
>> View schedules

Learn how to unit test your Angular projects! Testing services, components, forms, asynchronous code, & more!.

Topics covered

Angular Testing Overview
Setup, tools and technologies
Unit Testing
- Organization and Conventions
- Jasmine
  - Built-In Matchers
  - Setup and Teardown
  - Disabled and Focused Tests
- Karma
- Command line parameters
- Testing Pipes
- Testing Components
- Testing Change Detection
- Testing Services
- Testing Asynchronous Code
- Testing Http
- Testing Forms
- Testing Routing
- Angular Test Bed
- Run your tests in a headless browser for automated tests environments (Continuous Integration)
- Code coverage report and Code coverage enforcement
- Test Doubles: Mocks & Spies
  - Mock with fake class
  - Mock with spy
  - The Auto Spies Library
QnA

1 day to master RxJS!

🎓 Master RxJS to compose complex data-centric Angular app
🔥 6 hours of intensive hands-on training
👨‍💼 Instructor-led LIVE online course!
💼 Available as private team/corporate training as well
>> View schedules

"To Master Angular, you have to Master RxJS". But... RxJS comes with a steep learning curve, and we've seen so many teams struggling to use it properly within Angular. This live online workshop gives you a very practical approach to finally understand reactive programming and empower you to use RxJS and Observables in your Angular projects through lots of hands-on practice time. We'll show you how to implement Data Composition with Observables in order to have a full stream-based app!

Morning

RxJS and Reactive Programming
Data Composition with Observables
Exploring some RxJS operators and implementing them in a real world Angular business app
- map
- tap
- filter
- shareReplay
- startWith
- debounceTime
- distinctUntilChanged
- combineLatest
- fromEvent
- exhaustMap
- ... and more!
Debugging RxJS

Afternoon

Using RxJS Subjects
- Subject
- Behavior Subject
- Replay Subject
- Creating an Observable Data Service with RxJs Subjects
Handling errors in RxJS code
- Using the catchError operator
- Using a custom Pipe in components templates
- Adding an HttpInterceptor for failed Http Requests
Creating a custom operator
Higher-order Mapping Operators comparison and best usage
- SwitchMap, ConcatMap, MergeMap
Best practices
Common pitfalls
Final QnA

Architectures for Enterprise Applications

🎓 Design large-scale maintainable enterprise Angular applications
🔥 18 hours of intensive hands-on training
👨‍💼 Instructor-led LIVE online course!
🧪 Theory phases alternated with live coding and exercises
🙋 Ask questions and discuss with the instructors
>> View schedules

In this interactive workshop, you will learn from Manfred Steyer (Angular GDE and Trusted Collaborator in the Angular team) and/or one of his expert co-trainer, how large-scale enterprise Angular applications can be designed and developed. The exercises will gradually result in an application that you can use for your own projects at the end of the workshop.
Bonus: Now covers the latest Angular features, such as Reactivity with Signals, Lightweight architectures with standalone components, Functional guards, resolvers and interceptors.

Day 1 & 2

Structure for Large Applications: Monorepos, Nx and Strategic Design
- Plan architectures with Domain Driven Design (DDD)
- CLI workspaces and monorepos with Nx (Nrwl Extensions)
- Lightweight architectures with standalone components and APIs
- Develop and distribute reusable npm packages
- Categorization for libraries, modules and components
- Enforce architecture constraints with access restrictions
- Build performance: Incremental builds and tests with the Build Cache
- Integration into the CI process
- Customizable libraries with advanced DI patterns and content projection
- The open/close principle in Angular with its own standalone APIs
Scalable architectures: micro Frontends with Module Federation and Angular Elements
- From strategic design to micro frontends
- Pros and cons of Micro Frontends
- Monorepos vs. multiple repos
- Leverage Webpack Module Federation to load separately compiled and deployed micro frontends
- Dynamic Module Federation
- Module Federation and Standalone Components
- Sharing dependencies
- Dealing with different versions and version mismatches
- Communication between Micro Frontends
- Cross-framework development with Angular Elements and Web Components
Modern solutions with 🚥 Signals
- Concepts and Building Blocks: Signals, Computed and Effects
- Reactivity with Signals
- Signals and change detection
- Interop with RxJS
State management with the new NGRX Signal Store
- The state layer and DDD
- The different operating modes of the Signal Store
- Selectors and View Models
- Normalized state
- Dealing with side effects
- Managing entities
- Custom features for recurring requirements
- External Updaters: Separating intention and execution
- Signal Store and lazy loading
- Interop with RxJS
- Life Cycle Hooks
- Facades as the linchpin
- Differences and similarities to Redux

Day 3 & 4

State Management with the Classic NGRX Store and Redux
- The Redux pattern
- Actions and Reducers
- Selectors
- Effects
- @ngrx/entities
- The classic NGRX Store and 🚥 Signals
Reactive architectures with RxJS
- Reactive thinking and reactive design
- Chaining/piping of operators
- Combination operators
- Higher order observables
- Implicit and Explicit Closing
- Cold and hot observables, and multicasting
- Using subjects
- Error handling
- Debugging
Bonus: Performance tuning
- Lazy loading with and without a router
- Data binding performance with OnPush, RxJS and Signals
- AOT and Tree Shaking
- Analyze bundles
- Build performance with the build cache and incremental compilation
Bonus: modern security architectures and single sign-on
- Connect existing identity solutions such as Active Directory
- Social login (login with Facebook, etc.)
- OAuth 2 as well as 2.1 and OpenId Connect
- JSON Web Tokens (JWT)
- Token refresh
- Single sign out
- Current recommendations of the OAuth 2 Working Group and consequences
- Tokens in the browser vs. security gateways (backend for frontends)

Deep dive into Angular Testing!

🎓 Learn ALL you need to know about testing in Angular!
🔥 13 hours of technical hands-on training
👨‍💼 Instructor-led LIVE online course!
🧪 Theory phases alternated with live coding and exercises
🙋 Ask questions and discuss with the instructor
>> View schedules

Quality assurance with modern tools: Playwright, Jest, and Storybook.

Part 1: End-to-End Tests with Playwright

Playwright Basics
- Technological Approach: CDP vs. Webdriver
- Inside-Browser vs. Outside-Browser Testing
- Playwright compared to Webdriver and Cypress
- Installation & Setup
- Boosting Execution with Parallelisation
- Code Generator for a Quick Start
- Debugging Capabilities in VSCode
- Improve your Productivity with the UI Mode
- Analyse and find Bugs with the Trace Viewer
- Basic Selecting with page.locator
- Different Selector Engines
- Chained, Nested and Relative Selecting
- data-testid vs. a11y-based Selectors
- Actions
- Verify with Web Assertions
Playwright Advanced
- Miscellaneous: test steps, soft assertions, sequential mode
- Clean Code with Page Objects
- Playwrights “Dependency Injection”: Test Fixtures
- Controlling the Network with page.route, page.on(‘request’), and request
- Sharing localStorage and Cookies with Session Storage
- Global Setup and TearDown with Project Dependencies

PART 2: Unit Tests

Jest
- Jest vs Jasmine
- Jest setup
Asynchrony
- fakeAsync vs waitForAsync
- Mocking: jest.mock, jest.fn, jest.spyOn
- Testing with the inject() function or TestBed
Testing reactivity
- RxJS Marbles for pipe operators
- Testing NgRx

PART 3: Component & Integration Tests

Basics
- TestBed and Dependency Injection
- Differences between Standalone and NgModule-based Tests
- Mocking of components, directives and pipes with ng-mocks
- Pros / Cons of HttpTestingController
- RouterTestingHarness
Component Tests
- Mounting components
- Wrapper components
- Setting @Input properties
- Direct access to Angular’s DI
“Fallback” Technologies
- Angular Harnesses
- Spectator
- Testing library

PART 4: Test strategies; How to test correctly?

Two contrasting approaches: London & Detroit
Testing strategies: When should I use what test type?
TDD in the frontend?
Testing Trophy vs. Testing Pyramid
Testable Architecture

Bonus: Visual Regression with Storybook

Screenshottests with Playwright
Storybook
Visual Regression & CI

Frequently Asked Questions

What is Angular Academy ?
Angular Academy offers a wide range of Angular related courses (TypeScript, RxJS, NgRx, Architecture, Unit Testing, Material Design, PWA, ...), in the form of intensive classroom training for professional web developers, available as public classes or as corporate on-site training.
We also have a professional studio that allows us to host live online virtual classes assisted by an instructor, that attendees can join remotely from anywhere.
Is it good ?
Glad you ask! 😉
After so many years teaching Angular, we've been perfecting our intensive hands-on workshops to offer the most efficient way to learn Angular.
We even think that we have the best learning experience worlwide!!
What is the experience like being in your workshop ?
Learn about it by someone who actually took the training!
Read this review by an ex attendee: Learning Angular at Angular Academy
Also, read more on our remote training experience.
What is the price of the training ?
Click on Register to see the list of classes and prices.
What is the currency ?
Our prices are in Canadian dollars (CAD), so if you're in the US you get a good deal!
I'm in the USA, can I attend ?
Of course! You can definitely use your US credit card to register and pay online on this website.
Note that our prices are in Canadian dollars... so you're in for a pretty sweet deal!
How can I get a discount ?
Easy! Just follow us on Facebook, Twitter, Instagram or LinkedIn (links at the top of this page) as we often share promo codes!
What has changed for COVID-19 ?
Not much in terms of learning content, although we have adapted all our training material to be delivered online, see below.
Are you offering online courses as well ?
Typically offered as an in-person classroom training, we also have the option to host live online training (virtual class) assisted with an instructor. We have a professional studio that allows us to offer a similar learning experience and the same interaction with the trainer as in a typical classroom training; of course this is the kind of workshop that we prioritize since COVID-19.
Read more on our online classes.
Will you visit my city?
Just ask! If you are in Canada we can visit you for sure. Or we can have you in one of our popular instructor-led virtual classroom training (live remote class) which is our preference since COVID-19.
Which version of Angular are you using ?
We are *always* teaching on the latest version of Angular. We constantly update the training material to follow the new Angular versions. We like to brag that we are always the very first worldwide to teach on any new version of Angular 😉 See our history...
Can we customize the course content ?
Public classes are strictly following the courses outlines as seen above. But we can definitely tailor the content for private corporate training (on-site or online) to fit your team's preferences and expectations (at no additional fees). Optional topics could be: Bootstrap, Material Design, Firebase, Unit testing, Ionic, NgRx, Progressive Web App (PWA), Internationalization and localization, accessibility, Server-side rendering, ...
Is it for students ?
The primary target for this training is web professionals, who have the course paid by their employer. But we are thrilled when students try to get in one of our training, so we provide 50% off promo codes for students, contact us if you are interested!
What if I don't have a computer ?
You should have your own computer or laptop, we typically do not provide hardware. But contact us as soon as possible and we will see what we can do.
Is it ok to use a MAC, a PC, or Linux ?
Both PC, MAC or Linux are perfectly fine, you'll get the same experience during the workshop.
What is the setup required ?
A detailed setup document is sent to attendees a few days prior to the training.
Basically you'll have to install Node.js, Git and the latest version of the Angular CLI.
What do I need to attend a virtual class?
We use the popular Zoom online conferencing tool. You'll need a computer (PC or MAC), a headset with microphone and a second screen is required.
- Option 1: Connect an external monitor to your computer/laptop so you can practice using the main screen and watch the course on the second screen.
- Option 2 : Use a second computer or a tablet (iPad, Android) to watch the course.
Read our Zoom Guide.
Also, read more on our remote training sessions.
What do you mean by "live coding"?
(Learn + Try) * Repeat
The trainer will explain a topic and quickly switch to a live coding exercise that each participant will also do at the same time. This means shorter but more often periods of labs that boost the learning experience!!
All lab exercises are designed to make attendees build an entire web application step by step.
This application implements features similar to the ones of a production project, such as authentication, requests to a server, and routing.
Read why we think we offer the best learning experience you can get!!
Which code editor or IDE will we use ?
Attendees can use the tool of their choice (Sublime, Atom, Eclipse, WebStorm, Visual Studio, …). The instructor is using Visual Studio Code, which is free, available on PC, MAC and Linux, and offers free extensions which greatly improve the experience while developing an Angular app. We recommend to give it a try! http://code.visualstudio.com
Will I get any certification on completion of the course ?
You will receive an Angular Academy certification in the form of a course completion certificate, as well as an exclusive LinkedIn certification badge!
Note that you can optionally try an Angular Certification
Can we host this workshop at our office ?
Covid note: all our courses are done using virtual meeting technology, until further notice.
We can organize a Corporate On-Site Training on the dates of your choice (subject to availability) at your office anywhere in Canada. You can also choose to host one of our public classes in your office, if you can provide a room with WiFi, projector/TV, classroom or boardroom setup, big enough to accept external attendees as well, you'll get a great discount! We can also organize virtual classes that remote attendees can join.
Contact us to schedule a session now.

>> Read more...

Any unanswered questions ? contact us

Courses and typical schedule
Angular Fundamentals	2 days	8:30am to 4:00pm
Advanced Angular	2 days	8:30am to 4:00pm
Testing Angular	0.5 day	8:30am to 12:00pm
RxJS Workshop	1 day	9:00am to 4:00pm
Angular Architecture	4 days	8:00am to 12:30pm EST
Advanced Angular Testing	3 days	8:00am to 12:30pm EST

Learn Angular Now!

What's in it?

Workshop

Canadian!

Prerequisites

Customers

Angular Courses

Fundamentals

Advanced

Testing

RxJS

Architecture

Adv. Testing

2 days to jump start with Angular

Day 1

Day 2

2 days to Master Angular

Day 1

Day 2

Testing Angular Like A Pro!

Topics covered

1 day to master RxJS!

Morning

Afternoon

Architectures for Enterprise Applications

Day 1 & 2

Day 3 & 4

Deep dive into Angular Testing!

Part 1: End-to-End Tests with Playwright

PART 2: Unit Tests

PART 3: Component & Integration Tests

PART 4: Test strategies; How to test correctly?

Bonus: Visual Regression with Storybook

Upcoming Remote Public Trainings

Satisfaction score: 5/5

Attend our workshops remotely!

Our prices are in Canadian dollars (CAD)

Get notified when new courses or dates are available!

The Angular Academy

Difference!

Contact Us

Frequently Asked Questions