Mastering Angular

Reactive Extensions for JavaScript

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

Change Detection

This module will teach you about the internals of Angular. This knowledge is primarily useful for performance tuning and debugging strange behavior.

• Zones
• How Change Detection Works
• Immutables and Observables
• LAB - Optimizing Performance in an Angular Application

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
• Signals and RxJS
• LAB: Using Signals in an Angular Application

State Management with NgRx

With the increasing complexity of client-side applications, a lot of state has to be kept. It's quite a challenge to keep all state consistent. 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
• The Store, Actions and Reducers
• Using RxJS within Redux
• Efficient Slicing
• Using Async Pipes
• Tools

The NgRx Store

• Responsibilities
• Normalizing Data
• Initializing the Store

NgRx Reducers

• Useful Operators
• Splitting Up Reducers
• NgRx Effects
• LAB - Building a NgRx Store

Smart and Dumb Components

Should everyone be able to talk everything? No! Here we learn how to avoid chaos by splitting up our component into smart and dumb ones.

• Characteristics of Dumb Components
• Characteristics of Smart Components
• Performance Impact
• LAB - Integrating a NgRx 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

Forms Advanced

Being able to dynamically add input elements to a form is incredibly useful for applications. This chapter looks at how to do exactly that in Angular.

• Dynamically Adding Elements
• FormArray
• Nested Forms
• LAB - Forms array and nesting

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

General Principles of Unit testing

Every developer wants clean code that works. So how does one get to maintainable and working code? And moreover: keep it working.

• What every developer wants: Quality code that works; and keeps on working
• Finding bugs: not just in code. - Or how NASA lost a 125.000.000$ Mars orbiter
• What is unit testing? And what is a good unit test?
• Understanding the difference between a unit test and an integration test
• Test Driven Development - Should you be doing it?
• Role-playing: Marge, Homer and Bart
• The Triple-A of unit testing - and what has cooking to do with this?
• Arrange-Act-Assert, or Given-When-Then?
• Testing dependencies - and the art of writing testable code
• Using fake objects, and the difference between a Stub and a Mock

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