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 - Using apps without Signals or 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
• Signal, WritableSignal and ComputedSignal
• Handling Side-Effects
• Using Signals as Inputs
• Two-Way Binding between Components
• LAB - Managing State with Signals

Async Reactivity with RxJS

RxJS is at the heart of Angular's approach to handling asynchronous operations and event streams. Angular relies (for now) heavily on RxJS in many of its core APIs, such as HTTP requests, forms, and component communication. To build robust Angular applications, it is essential to understand how to use RxJS for managing data flows, reacting to user input, and composing complex asynchronous logic. While RxJS can be challenging to learn, mastering it unlocks the full power of Angular's reactive programming model.

• What are Observables
• Observables in Angular
• RxJS Operators
• Signals vs Observables
• LAB - Spotify Search with Observables

Async Reactivity with Signals

While RxJS is a powerful library for handling asynchronous operations, Angular's built-in signals provide a more streamlined and efficient way to manage state and reactivity for most use cases. In this module, we will explore how to use signals for asynchronous operations, including handling side effects, managing state, and integrating with other Angular features. We will also compare the use of signals with RxJS observables and discuss when to use each approach.

• Limits of Effect
• RxJS Interop
• Resource API
• Debounced Signals
• Async Signal Forms
• LAB - Spotify Search 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.

• Change Detection with ZoneJS
• The OnPush Strategy and Dirty Marking
• Signals and Change Detection
• Zoneless Change Detection
• LAB - Exploring Change Detection Strategies

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
• Implementing Stores
• Consuming Stores
• Smart and Presentational Components
• Introducing State Management Libraries
• LAB - Managing Application State with Angular Signals

NgRx Signal Store

NgRx Signal Store is a state management library built on top of Angular's signals. It provides a powerful and efficient way to manage application state in Angular applications. In this module, you will learn how to use NgRx Signal Store to create stores for your application's state, and how to leverage its features to build scalable and maintainable applications.

• Creating a Store
• Deep Signals
• Using the Store in your Components
• RxJS Integration
• Tools and Plugins
• LAB - Refactoring State Management with NgRx Signals

Event-Driven State Management

Event-driven state management is a powerful approach to managing state in Angular applications. It allows you to decouple your application's state from its components, making it easier to manage and maintain. In this module, you will learn about the Redux pattern and how to implement it using NgRx Signal Store or NgRx (Global) Store. This module focusses on applications that require elaborate state management solutions.

• The Redux Pattern
• NgRx Signal Store Event Plugin
• Cross-Store Communication
• LAB - Using Event-Driven State Management

Performance Optimization

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 we introduce you to techniques to optimize the performance of your Angular application. We will introduce techniques like lazy loading, deferrable views, and SSR. Importantly, we will also see how concepts from previous chapters—such as signals and observables—play a crucial role in achieving optimal performance.

• Fine-grained Change Detection
• Memoization and Caching
• Lazy Loading
• Deferrable Views
• SSR
• Lab - Optimizing Performance

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
• 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 - Testing an Angular App

Structuring an Application

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

• Standalone Application
• Clean Imports
• AI-Assisted Development with Angular
• Creating Libraries
• Other Tools like Nx and AnalogJS

Reusable Components

In this module, we focus on patterns to make components truly reusable across your application. This will introduce some more advanced techniques that you can when creating components. This module also introduces component libraries like Angular Material that already does the heavy lifting by providing you widget-like components. Finally, we will also see how you can use Angular Elements to create reusable web components that can be used in any web application, regardless of the framework or library it is built with.

• What are Reusable Components
• Content Projection
• Template Fragments
• Angular Material
• Angular Elements
• LAB - Using Angular Material