Reactive Patterns with RxJS and Angular Signals: Elevate your Angular 18 applications with RxJS Observables, subjects, operators, and Angular Signals. 2 Ed

Cover....1

Title Page....2

Copyright and Credits....3

Dedication....4

Foreword....5

Contributors....6

Table of Contents....8

Preface....14

Part 1: An Introduction to the Reactive World....20

Chapter 1: Diving into the Reactive Paradigm....22

Technical requirements....23

Exploring the pillars of reactive programming....23

Data streams....23

Observer patterns....24

Learning about the marble diagram (our secret weapon)....25

Highlighting the use of RxJS in Angular....28

The HttpClient module....28

The Router module....29

Reactive forms....32

The Event emitter....32

Summary....33

Chapter 2: Walking through Our Application....34

Technical requirements....34

Breaking down our app’s interfaces....35

View one – the landing page....35

View two – the New Recipe interface....36

View three – the My Recipes interface....37

View four – the My Favourites interface....38

View five – the Modify Recipe interface....38

View six – the Recipe Details interface....39

Reviewing our app’s architecture....39

Reviewing our app’s components....40

Summary....41

Part 2: A Trip into Reactive Patterns....42

Chapter 3: Fetching Data as Streams....44

Technical requirements....45

Defining the data fetch requirement....46

Exploring the classic pattern for fetching data....47

Defining the structure of your data....47

Creating the fetching data service....47

Creating Angular standalone components....49

Injecting and subscribing to the service in your component....52

Displaying the data in the template....53

Managing unsubscriptions....54

Exploring the reactive pattern for fetching data....57

Retrieving data as streams....57

Defining the stream in your component....58

Using the async pipe in your template....59

Highlighting the advantages of the reactive pattern....60

Using the declarative approach....60

Using the change detection strategy of OnPush....61

Diving into the built-in control flow in Angular 17....63

Structural directives....64

Built-in control flows....65

Including built-in control flows in our recipe app....69

Benefits of built-in control flow....70

Summary....71

Chapter 4: Handling Errors Reactively....72

Technical requirements....72

Understanding the anatomy of an Observable contract....73

Exploring error handling patterns and strategies....74

The replace strategy....76

The rethrow strategy....78

The retrying strategy....79

Choosing the right error handling strategy....85

Handling errors in our recipe app....87

Summary....89

Chapter 5: Combining Streams....90

Technical requirements....90

Defining the filtering requirement....91

Exploring the imperative pattern for filtering data....92

Exploring the declarative pattern for filtering data....95

The combineLatest operator....97

Updating the filter value....100

Highlighting common pitfalls and best practices....103

Unnecessary subscriptions....103

Missing or incomplete values....104

Performance overhead....104

Confusing error handling....104

Summary....104

chapter 6: Transforming Streams....106

Technical requirements....106

Defining the autosave requirement....107

Exploring the imperative pattern for the autosave feature....108

Exploring the reactive pattern for the autosave feature....111

Higher-order Observables....111

Higher-order mapping operators....112

Summary....128

Chapter 7: Sharing Data between Angular Components....130

Technical requirements....130

Defining the sharing data requirement....131

Exploring the reactive pattern to share data....131

Step 1 – Creating a shared service....132

Step 2 – Updating the last selected recipe....133

Step 3 – Consuming the last selected recipe....136

Wrapping up the data-sharing reactive pattern....137

Leveraging Deferrable Views in Angular 17....138

Summary....139

Part 3: The Power of Angular Signals....140

Chapter 8: Mastering Reactivity with Angular Signals....142

Technical requirements....142

Understanding the motivation behind Signals....143

The traditional Zone.js approach....143

The new Signals approach....143

Unveiling the Signal API....144

Defining Signals....144

Creating Signals using the constructor function....145

Reading Signals....146

Modifying a writable Signal....147

Computed Signals....148

Signal effects....149

Unlocking the power of RxJS and Angular Signals....149

Understanding the behavior of toSignal()....151

Understanding the behavior of toObservable()....153

Integrating Signals into our recipe app....155

Fetching data as streams using Signals....155

Combining streams using Signals....158

Sharing data using Signals....160

Transforming streams using Signals....161

Exploring reactive data binding with Signals....163

Signal inputs....163

Model inputs....165

Signal queries....166

Summary....167

Part 4: Multicasting Adventures....168

Chapter 9: Demystifying Multicasting....170

Technical requirements....170

Explaining multicasting versus unicasting....170

Unicasting and cold Observables....171

Multicasting and hot Observables....172

Transforming cold Observables into hot Observables....174

Exploring RxJS subjects....175

A plain subject....176

replaySubject....177

BehaviorSubject....178

Highlighting the advantages of multicasting....181

Summary....182

Chapter 10: Boosting Performance with Reactive Caching....184

Technical requirements....184

Defining the caching requirement....185

Exploring the reactive pattern to cache streams....186

The shareReplay operator....186

Using shareReplay in RecipesApp....187

Customizing the shareReplay operator....189

Replacing the shareReplay operator with the share operator....191

Highlighting the use of caching for side effects....193

Summary....194

Chapter 11: Performing Bulk Operations....196

Technical requirements....196

Defining the bulk operation requirements....197

Learning the reactive pattern for bulk operations....198

The forkJoin operator....199

The bulk operation reactive pattern....200

Benefits of the forkJoin operator....203

Learning the reactive pattern for tracking the bulk operation’s progress....204

Summary....206

Chapter 12: Processing Real-Time Updates....208

Technical requirements....208

Defining the requirements of real time....209

Learning the reactive pattern for consuming real-time messages....210

Creating and using WebSocketSubject....210

WebSocketSubject in action....214

Learning the reactive pattern for handling reconnection....220

Summary....223

Part 5: Final Touches....224

Chapter 13: Testing RxJS Observables....226

Technical requirements....226

Learning about the subscribe and assert pattern....227

Testing single-value output methods....227

Testing multiple-value output methods....230

Testing timed-value output methods....231

Learning about the marble testing pattern....232

Understanding the syntax....232

Introducing TestScheduler....233

Implementing marble tests....235

Testing timed-value output methods....237

Highlighting testing streams using HttpClientTestingModule....239

Summary....241

Index....244

Other Books You May Enjoy....251

RxJS is a powerful reactive extension for JavaScript, specializing in asynchronous and event-driven programming. This book serves as a comprehensive, step-by-step guide to learning RxJS and reactivity, helping you navigate reactive patterns, efficient data management, and the streamlined implementation of common features with minimal code.

This second edition aligns with the latest version of Angular, introducing new reactive patterns based on Angular Signals, which play a pivotal role in enabling fine-grained reactivity within Angular and enhancing change detection and user interface rendering. Throughout the book, you'll construct a complete application that incorporates the latest Angular features, such as standalone components, new built-in control flow, deferrable views, and more. You'll focus on cultivating skills to handle data reactively, thus improving the application's overall quality, user experience, and developer productivity. As you progress, the book covers best practices for testing asynchronous streams and optimizing app performance.

By the end of this RxJS and Angular book, you'll not only be able to develop Angular applications by implementing reactive patterns, but also grasp all the best practices, ensuring a well-rounded understanding of RxJS within the Angular framework.

What you will learn

• Get to grips with RxJS core concepts such as Observables, subjects, and operators
• Use the marble diagram in reactive patterns
• Delve into stream manipulation, including transforming and combining them
• Understand memory leak problems using RxJS and best practices to avoid them
• Build reactive patterns using Angular Signals and RxJS
• Explore different testing strategies for RxJS apps
• Discover multicasting in RxJS and how it can resolve complex problems
• Build a complete Angular app reactively using the latest features of RxJS and Angular

Who this book is for

If you're a developer working with Angular and RxJS, this book is for you. Designed for anyone at a beginner level in both Angular and RxJS, this book will help you gain experience and harness the potential of RxJS or benefit you if you're looking to leverage the reactive paradigm within your Angular applications. This book assumes some familiarity with Angular, basic RxJS, and TypeScript, as well as foundational knowledge of functional programming.