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

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 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.

• Domain, Routing, Core and Shared Modules
• Exporting and Providing
• Clean Imports
• Creating Libraries
• 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, build stubs and mocks? Here we look at building component specifications using Jasmine and Karma.

• Writing Unit Tests with Jasmine
• Setting Up a Productive Testing Environment with Karma
• Writing Testable Angular Code
• Testing your Models, Services, Pipes, and Component Logic with Isolated Tests
• Angular Testing Utility APIs: Testing with the DOM in Mind
• 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
• LAB - Building a Circular Progress Bar

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
• LAB - Using Angular Elements