Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Reactive Patterns with RxJS and Angular Signals
Reactive Patterns with RxJS and Angular Signals

Reactive Patterns with RxJS and Angular Signals : Elevate your Angular 18 applications with RxJS Observables, subjects, operators, and Angular Signals , Second Edition

eBook
€14.99 €21.99
Paperback
€26.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Reactive Patterns with RxJS and Angular Signals

Diving into the Reactive Paradigm

Reactive patterns are reusable solutions to a commonly occurring problem using reactive programming. Behind all these patterns is a new way of thinking, a new architecture, new coding styles, and new tools. That’s what this entire book is based on – useful reactive patterns in Angular applications.

Now, I know you are impatient to write your first reactive pattern in Angular, but before doing so, and in order to help you take full advantage of all the RxJS patterns and leverage the reactive paradigm, we will start by explaining in detail all the fundamentals and preparing the groundwork for the following chapters.

Let’s start with a basic understanding of the reactive paradigm, its advantages, and the problems it solves. Best of all, let’s put a reactive mindset on and start thinking reactively. We will begin by highlighting the pillars and the advantages of the reactive paradigm. Then, we will explain the marble diagram...

Technical requirements

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.

Exploring the pillars of reactive programming

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

Learning about the marble diagram (our secret weapon)

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

Highlighting the use of RxJS in Angular

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

Summary

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.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Use practical reactive patterns in your Angular apps to improve the quality and performance of your code
  • Learn performance optimization techniques from a Google Developer Expert for Angular
  • Seamlessly integrate RxJS with Angular features such as components and services
  • Purchase of the print or Kindle book includes a free PDF eBook

Description

RxJS is a powerful reactive extension for JavaScript, specializing in asynchronous and event-driven programming, but you don’t find many books on using RxJS in Angular applications. Written by an industry expert with over a decade of experience, this book helps 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 also focus on cultivating skills to handle data reactively, thus improving the application's overall quality, user experience, and developer productivity. 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.

Who is this book 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.

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

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 05, 2024
Length: 254 pages
Edition : 2nd
Language : English
ISBN-13 : 9781835087701
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Jul 05, 2024
Length: 254 pages
Edition : 2nd
Language : English
ISBN-13 : 9781835087701
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 85.97
Angular Design Patterns and Best Practices
€28.99
Effective Angular
€29.99
Reactive Patterns with RxJS and Angular Signals
€26.99
Total 85.97 Stars icon

Table of Contents

20 Chapters
Part 1:An Introduction to the Reactive World Chevron down icon Chevron up icon
Chapter 1: Diving into the Reactive Paradigm Chevron down icon Chevron up icon
Chapter 2: Walking through Our Application Chevron down icon Chevron up icon
Part 2: A Trip into Reactive Patterns Chevron down icon Chevron up icon
Chapter 3: Fetching Data as Streams Chevron down icon Chevron up icon
Chapter 4: Handling Errors Reactively Chevron down icon Chevron up icon
Chapter 5: Combining Streams Chevron down icon Chevron up icon
Chapter 6: Transforming Streams Chevron down icon Chevron up icon
Chapter 7: Sharing Data between Angular Components Chevron down icon Chevron up icon
Part 3: The Power of Angular Signals Chevron down icon Chevron up icon
Chapter 8: Mastering Reactivity with Angular Signals Chevron down icon Chevron up icon
Part 4: Multicasting Adventures Chevron down icon Chevron up icon
Chapter 9: Demystifying Multicasting Chevron down icon Chevron up icon
Chapter 10: Boosting Performance with Reactive Caching Chevron down icon Chevron up icon
Chapter 11: Performing Bulk Operations Chevron down icon Chevron up icon
Chapter 12: Processing Real-Time Updates Chevron down icon Chevron up icon
Part 5: Final Touches Chevron down icon Chevron up icon
Chapter 13: Testing RxJS Observables Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Half star icon 4.9
(7 Ratings)
5 star 85.7%
4 star 14.3%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by




serene boyland Aug 14, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This book is a must have for those looking to expand their knowledge of reactive patterns in angular. Book is full of examples that makes it easy to follow along and learn new techniques. Thanks for providing this awesome book, I'm looking foward to more great content from this Author/Authors.
Amazon Verified review Amazon
Amazon Customer Jul 30, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Like many people in their continuing learning journey with Angular, appreciation of reactivity comes with time. I was thrown off the deep end into Angular as my first JS frontend framework in college and internships, only using what RXJS I could grab ahold of. Only relatively recent in my job I have taken steps to learn reactivity in a structured way, and this book is a great piece of that foundation. Experienced with Angular or not, this book is as good of an introduction as it is a refresher.Straight to the point, the recipes CRUD app that is built (with repository for reference for each chapter) is a good talking point for the varying aspects of reactivity. A variety of async calls and events for highlighting RXJS, and assorted synchronous state for reference with signals. The preconfigured local server that accompanies the project was especially nice, so I could focus purely on the frontend and how it alone can shape what comes from and is sent to the backend. I think overall, if you work with a lot of API calls like I do, this book covers most scenarios I could think of. Case in point: had I read this before my previous sprint, I wouldn't have wasted so much time handling errors incorrectly around `forkJoin`.As cliche as it sounds, I would say this book is good whether you are a beginner or experienced with approaching reactivity in Angular. Beginners, take your time following the example project and messing around with it as you go. And experienced folks, read along and think "wow, I learned this lesson the hard way. I wish I had this book before." And for both groups, keep your copy bookmarked and on the ready.
Amazon Verified review Amazon
Ricardo Martinez Aug 07, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
But as the text comments, it's not for beginners. Coupled with the hindrance that the Kindle edition has some code errors that have not aided the comprehension on my first reading which I as a non angular nor rxjs expert suffered ...But 2 weeks later and some RxJS angular programming in between have allowed me to really enjoy and value the book
Amazon Verified review Amazon
Manfred S. Jul 19, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Ich war bereits ein Fan von der 1. Auflage: Reaktive Programming ist für viele Entwickler:innen ein Paradigmenwechsel und deswegen kann das Thema recht ansprungsvoll sein. Genau aus diesem Grund bin ich ein Fan von Lamis' Didaktik: Für jedes Thema gibt es praktische Beispiele, die mit reaktiven Mustern bestimmte Probleme lösen. Man sieht also sofort, wozu das ganz gut ist.Daneben deckt die neue 2. Auflage nun auch Signals und das Zusammenspiel mit RxJS ab. Außerdem geht es auch auf den neuen data-flow in Angular ein.Ein Must-Have für alle Angular-Entwickler:innen!
Amazon Verified review Amazon
Salman Farsi Jul 11, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
“Reactive Patterns with RxJS and Angular Signals” is an exceptional resource for developers looking to deepen their understanding of reactive programming within Angular applications. Lamis Chebbi’s expertise shines through as she explains complex concepts with clarity and precision. The book’s structure, starting from the fundamentals and gradually building up to advanced topics, makes it accessible for both beginners and experienced developers.One of the standout features of this book is its practical approach. Each chapter is filled with real-world examples and hands-on exercises that reinforce the concepts discussed. The integration of RxJS and Angular Signals is particularly well-explained, providing readers with the tools they need to build efficient and reactive applications. The author’s passion for empowering developers is evident throughout the book, making it an inspiring read.Overall, “Reactive Patterns with RxJS and Angular Signals” is a must-read for anyone working with Angular. It not only covers the latest features and best practices but also encourages a deeper understanding of reactive programming principles. Whether you’re looking to improve your skills or stay up-to-date with the latest advancements in Angular, this book is an invaluable addition to your library.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.