Mastering Angular

Introduction to Reactivity

This module is an introduction to what reactivity means and why Angular has the concepts of observables and signals.

• What is Reactivity
• Reactive Programming
• Sync vs Async Reactivity
• Reactive Solutions in Angular: Signals (built-in) and observables (RxJS)
• LAB - Making a Spotify Search and Web Shop without Signals or Observables

Reactivity with RxJS

Reactive programming is a world on its own and is not necessarily tied to Angular. However Angular uses RxJS in many of its APIs, so we must have a proper understanding of what it means to write reactive code. RxJS has a steep learning curve. But once you master it, there is no going back.

• What are Reactive Extensions
• Observable and Observer
• Subjects
• Cold versus Hot Observables
• Making Async Calls
• Combining Observables
• Error Handling
• Dealing with Back Pressure
• LAB - Spotify Search with Observables
• LAB - Web Shop with Observables

Built-in Reactivity with Signals

Signals are a built-in way to reactively bind to data. They allow Angular to keep track of changes and side-effects in a more efficient way. In this module we'll explore all their use-cases.

• What are Signals, and Why do I Need Them?
• Signal, WritableSignal and ComputedSignal
• Handling Side-Effects
• Using Signals as Inputs
• Two-Way Binding between Components
• RxJS interop
• LAB: Web Shop with Signals

Change Detection

This module will teach you about the internals of Angular's rendering process. We will take a look at the original change detection algorithm and the newer one called zoneless. We introduce ways to prevent unnecessary re-renders and will see how signals and observables tie into this story. This knowledge is useful for performance tuning and debugging strange behavior.

• Change Detection with ZoneJS
• The OnPush Strategy
• Immutables and Observables with OnPush Strategy
• Zoneless Change Detection
• LAB - Optimizing Performance in an Angular Application

State Management

How does Angular manage state, and how can we prevent losing this state when a user accidentally refreshes the browser? The module give you an introduction to state management and different patterns.

• Component Level State
• Sharing State
• State Management Patterns
• Smart and Dumb Components
• Introducing State Management Libraries

State Management with NgRx Store

As Single Page Applications gain more and more features, they need to handle more and more state. Using a state management pattern can help us keep things neat and tidy. Redux introduces a pattern to manage this state in a convenient way, while keeping your UI up to date as well. NgRx Store is the favorable implementation of Redux for Angular.

• The Redux Pattern
• Major Principles
• Creating the Store
• Actions
• Reducers
• Views
• NgRx Effects
• Initializing the Store and State Persistence
• Tools and Plugins
• LAB - Integrating a NgRx Store into your Angular Application

NgRx Signal Store

Traditional state management approaches in Angular work with observables. Since the release of signals, NgRX has also introduced a Signal Store. This was the missing piece for signals in Angular.

• Creating a Store
• Deep Signals
• Using the Store in your Components
• RxJS Integration
• Tools and Plugins
• LAB - Integrating a NgRx Signal Store into your Angular Application

Structuring an Application

Applications grow larger, code bases become unmanageable. Unless you structure them right.

• Working with Modules
• Standalone Application
• Clean Imports
• AI-Assisted Development with the Angular MCP CLI
• Creating Libraries
• Other Tools like Nx and AnalogJS/li>
• LAB - Structuring a more Complex Angular Application

Server-side Rendering and Static Site Generation

Angular takes a lot of measures to make your app high-performant. But you can take it a bit further, especially when it comes to load times. In this Module you will learn about Server-side Rendering and Static Site Generation in Angular. Here you'll learn the difference between a good and a great application and how to please the elders of the internet.

• Server-side Rendering
• Prerendering (SSG)
• Hydration
• Developing and Testing with SSR

Testing Angular Applications

How can we test Angular components, replace services as dependencies, and build stubs and mocks? In this chapter we introduce Angular testing fundamentals, starting with the traditional Jasmine + Karma approach and gradually moving towards modern tooling such as Vitest. We also explore how Angular's own testing utilities make writing reliable and maintainable tests easier.

• Testing Fundamentals
• The Classic Angular Testing Stack: Jasmine & Karma
• Writing Unit Tests with Jasmine
• Setting Up and Understanding a Karma-Based Test Environment
• Modern Angular Testing with Vitest
• Writing Testable Angular Code
• Testing Models, Services, Pipes, and Component Logic with Isolated Unit Tests
• Angular Testing Utility APIs: TestBed, ComponentFixture, and Testing with the DOM in Mind
• Beyond Unit Tests: Integration and End-to-End Testing in Angular
• LAB - Unit Testing in Angular

Custom Components with SVG and Canvas

Most Angular components are the result of slapping together a bunch of existing HTML elements. But what if you need something fundamentally new? In this topic, you will learn to draw exactly what you need by either using SVGs or a canvas.

• SVG Graphics
• Canvas Graphics
• Animating Graphics

Angular Elements

Can I use my Angular component in a non-Angular environment like Drupal, SharePoint, WordPress and so on? Well you can. Buckle up for a wild ride with Web Components and Angular Elements.

• Custom Elements
• Transforming Angular Components to Custom Elements
• Packaging and Using your Custom Element