Angular Academy Winnipeg
Angular Academy

The #1 Angular Training in Winnipeg!

LEARN ANGULAR NOW IN WINNIPEG!

Angular Academy is the #1 hands-on instructor-led training in Winnipeg!


What's in it?

Learn the core concepts of coding a real business app with Angular from an industry expert in an immersive workshop in Winnipeg (or online).

Workshop

It's hands-on! An important part of the training is dedicated to building apps together and testing things in real time (interactive learning class).

Canada

Canadian!

If you are in Canada we want to visit you. We are hosting the course in Winnipeg, but also in Toronto, Montreal, Vancouver, Ottawa, Calgary, ...

Prerequisites

You should have significant experience in building web applications with HTML5 and JavaScript. No previous experience with AngularJS is required.

Upcoming Remote Public Trainings


★★★★★

Satisfaction score: 5/5

Based on 392 ratings from the last 6 months.

Attend our workshops remotely!

Contact us for your private Corporate Training.

Unable to see the list of classes above? contact us!
Classes en Français? Suivez ce lien.

Our prices are in Canadian dollars (CAD)

USA In the USA? Attend our virtual classes and take advantage of the 30% exchange rate! (and no taxes)

Courses and typical schedule
Angular Fundamentals 2 days 9:00am to 4:00pm
Angular Styling Workshop 3 days 8:00am to 12:30pm EST
Advanced Angular 2 days 9:00am to 4:00pm
Testing Angular 0.5 day 8:30am to 12:00pm
RxJS Workshop 1 day 9:00am to 4:00pm
Performance Optimization 3 days 8:00am to 12:30pm EST
Angular Architecture 4 days 8:00am to 12:30pm EST
Advanced Angular Testing 3 days 8:00am to 12:30pm EST
If you have a group of about 6 or more people, we recommend our Corporate Training.
You'll be able to choose a time that works for you and even request free curriculum adjustments.
Contact Us

Angular Academy is a training center accredited by Emploi-Québec, our accreditation number is : 0056463

Get notified when new courses or dates are available!


We will only contact you regarding our Angular Workshops!
You can easily unsubscribe at any time :-)

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


Angular Fundamentals Workshop
  • 🎓 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
  • Async Requests to a REST API (HTTP)
    • The HttpClient service
    • A first async GET request
    • Consuming an Observable response
    • Subscribe() function
    • The async pipe
    • Pipe() function
    • Error handling in RxJS code
  • Implementing a local cache with ShareReplay()
  • Implementing pagination, sorting and filtering on a list

Day 2

  • Debugging an application
    • Configuring the debugger and breakpoints
    • The Angular DevTools extension
  • Implementing pagination, sorting and filtering on a list
  • Deployment
    • Optimizations for production
    • ng build and ng deploy commands
  • 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 Intercept0rs
    • Protecting access to components with Route Guards
  • Best Practices (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, ...

Deep dive into Angular CSS Styling!


Angular Styling Workshop
  • 🎓 Learn ALL you need to know about CSS Styling 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

CSS essentials for Angular developers!

Part 1: CSS Tools

  • Dev Tools
  • IDE
  • Linter
  • Frontend Frameworks

Part 2: CSS Fundamentals

  • Including Styles
  • Specificity
  • Combinators
  • Classes vs. IDs
  • Not important

Part 3: Essential CSS

  • Box Model
  • Box Sizing
  • Size & Units
  • Text & Fonts
  • Forms

Part 4: Advanced CSS

  • Custom Properties
  • Display
  • Position
  • Flexbox
  • Grid

Part 5: Responsive CSS

  • Media Queries
  • Mobile First

Part 6: Modern CSS

  • Transform
  • Transitions
  • SCSS
    • Introduction & Usage
    • Nesting Selectors
    • Variables & Mixins
  • Tailwind
    • Introduction & Usage
    • Fundamentals

Part 7: Styling in Angular

  • (S)CSS Architecture
  • View Encapsulation
  • Angular Transitions
  • Component Frameworks
  • Design Systems

2 days to Master Angular


Advanced Angular Workshop
  • 🎓 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 Intercept0r 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
    • Lazy loading in templates with @defer
    • Performance for Data Binding with OnPush
    • Web Workers to improve responsiveness
    • Profiling runtime performance
    • Using bundle analyzer
    • Virtual Scrolling
    • Improve ngFor with trackBy (and the new @for syntax)
    • 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, ...)
  • Introduction to Signals
    • Signals API
    • Computed Signal
    • Effects
    • RxJS Interop
    • Signal based components
  • Modern State Management with Redux and ngrx
    • Why Redux ?
    • Introduction to the ngrx platform
    • Setting up ngrx store
    • Stateful vs stateless components
    • Smart/Dumb component architecture
    • 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
  • Server-side rendering
    • Improving performances and SEO
    • Hydration
    • Static Site Generation
  • Final QnA

Testing Angular Like A Pro!


Testing Angular Workshop
  • 🎓 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!


Angular RxJS Workshop
  • 🎓 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 HttpIntercept0r 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

Deep dive into Angular Performance Optimization!


Angular Performance Optimization Workshop
  • 🎓 Learn ALL you need to know about optimizing Angular performance!
  • 🔥 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

Develop fast & successful Angular solutions!

Part 1: Professional Performance Audit & Tools

  • Performance Audit Framework
  • Performance Audit Tools
  • Google PageSpeed & Google Chrome Lighthouse
  • WebPageTest & Perfume.js
  • Google Chrome DevTools & Angular DevTools
  • Source Map Explorer & Webpack Bundle Analyzer
  • Import Graph Visualizer

PART 2: Optimizing load times for Angular apps

  • Web Performance Best Practices
  • NgOptimizedImage Directive
  • Build Optimization & Tree Shaking
  • 3rd party libs / CSS frameworks
  • Lazy Loading & Defer
  • Server Side Rendering & Static Site Generation
  • Hydration in Angular 16+
  • Caching Best Practices

PART 3: Optimizing Angular runtime performance

  • Angular ChangeDetection Optimization
  • Change Detection und Signals
  • ChangeDetectorRef Usage
  • Angular Templates: Pipes, Flags
  • @for track & Virtual Scrolling
  • API Communication Best Practices

BONUS

  • Angular Resolver & Alternatives
  • Smart vs Dumb Components
  • RxJS & State Management (NgRx)
  • Web Workers & Service Workers
  • Scheduling

Architectures for Enterprise Applications


Angular Architecture Workshop
  • 🎓 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.

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!


Advanced Angular Testing Workshop
  • 🎓 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

Exclusive discounts program!


We have plenty of rebate options that you could benefit.

Contact Us


For more information or organizing your Corporate Training.