This chapter does not require any environment setup or installation steps.

All the code snippets in this chapter are just examples to illustrate the concept, so you will not need the code repository to follow along. However, if you’re interested, the code for the book can be found at https://github.com/PacktPublishing/Reactive-Patterns-with-RxJS-and-Angular-Signals-Second-Edition.

This book assumes that you have a basic understanding of Angular and RxJS.

Note

This book uses the new Angular documentation site, angular.dev. The previous documentation site, angular.io, will soon be deprecated. Stay connected with the latest updates and resources by accessing the documentation through this link.

Reactive programming is among the major programming paradigms used by developers worldwide. Every programming paradigm solves some problems and has its own advantages. By definition, reactive programming is programming with asynchronous data streams and is based on observer patterns. So, let’s talk about these pillars of reactive programming!

Data streams

Data streams are the spine of reactive programming. Everything that may change or happen over time (you don’t know when exactly) is represented as asynchronous streams such as events, notifications, and messages. Reactive programming is about reacting to changes as soon as they are emitted!

An excellent example of data streams is UI events. Let’s suppose that we have an HTML button and we want to execute an action whenever a user clicks on it. Here, we can think of the click event as a stream:

//HTML code
<button id='save'>Save</button...

RxJS ships with more than one hundred operators – these are among the building blocks of RxJS, useful for manipulating streams. All the reactive patterns that will be detailed later in this book are based on operators, and when it comes to explaining operators, it is better to refer to a visual representation – that’s where marble diagrams come in!

Marble diagrams are visual representations of the operator’s execution, which will be used in all chapters to understand the behavior of RxJS operators. At first, it might seem daunting, but it is delightfully simple. You only have to understand the anatomy of the diagram and then you’ll be good at reading and translating it.

Marble diagrams represent the execution of an operator, so every diagram will include the following:

• Input Observable(s): Represents one or many Observables given as input to the operator
• Operator: Represents the...

RxJS is practically a first-class citizen in Angular. It is part of the Angular ecosystem and is used in many features to handle asynchronous tasks. The following are some examples of these features:

• The HttpClient module
• The Router module
• Reactive forms
• The Event emitter

We will discuss each of the following concepts in the subsequent subsections.

Note

We recommend taking a quick look at https://angular.dev/overview, where you can find further details about the aforementioned features.

The HttpClient module

You might be familiar with the HttpClient API provided by Angular that is used to communicate with a server over the HTTP protocol. The HttpClient service is based on Observables that manage all transactions, which means that the result of calling API methods such as GET, PATCH, POST, and PUT will be an Observable.

In the following code snippet, we have an example of an Angular service that injects...

In this chapter, we walked you through the fundamentals of reactive programming and in which use cases it shines. Then, we explained the marble diagram that will be our reference for explaining RxJS operators in all the following chapters. Finally, we highlighted the use of reactive programming in Angular by illustrating concrete examples, implementations, and advantages.

Now that we have got the basics right, it is time to start preparing and explaining, in the next chapter, the application that we are going to build throughout this book, where we are going to implement all of the reactive patterns we will learn progressively.