Sign upSign InSign upSign InPriyank BhardwajFollowBits and Pieces--3ListenShareWelcome to the world of reactive programming with RxJS and Angular! In this comprehensive guide, we’ll explore RxJS, a powerful library that enables reactive programming in Angular apps. Whether you’re new to Angular or an experienced developer, this series will equip you with the skills to harness RxJS’s full potential.Breaking down this article into three parts will enhance readability and user experience. The Table of Contents provided below will assist readers in quickly accessing the specific topics they desire, saving them time and effort.2. Observables3. Subjects4. Operators5. Schedulers6. Testing7. Advanced topics8. RxJS in Angular9. ConclusionTo begin our journey, let’s dive into the introduction.RxJS is a library for reactive programming using Observables, which makes it easier to compose asynchronous or callback-based code. It provides a set of operators that allow you to transform, combine, and filter streams of data. RxJS is written in TypeScript but can be used with any JavaScript framework or library.Besides RxJS, here are more Angular dev tools that you could consider.RxJS can simplify the management of complex asynchronous code. It allows you to handle multiple events and data streams in a more concise and readable way. RxJS also provides a way to easily handle errors and cancel requests. Additionally, it can improve the performance of your application by reducing the number of requests made to the server.Let’s see a simple example.Suppose we have a component called itemListComponent that displays a list of users fetched from an API. Here's how it would work using RxJS:Create a Service: First, we create a service called ItemService to handle the API requests. This service will use Angular's httpClient to make an HTTP GET request to retrieve the list of users.Subscribe in the Component: We inject the ItemService in ItemListComponent and subscribe to the observable returned by the getItems() method. We receive the list of users and assign it to a local variable.In the component’s template, we use *ngFor to iterate over the items array and display the name of each user in a list.When the component is initialized (ngOnInit), the subscription is made to the getItems() observable. Once the API response is received, the items array is populated with the data. Angular's change detection mechanism updates the template with a list of items on the screen.💡 When using libraries like RxJS, you could make your code modular, shareable, and reusable by composing smaller library functions into more complex ones you require, then using Bit to independently test, document, version, and deploy them.bit.devBONUS : Observable explained like a babyImagine an observable as a special chocolate vending machine. It brings you chocolates one by one, making a sound each time a new chocolate is ready. In Angular, an observable is like a helpful friend who delivers chocolates to you over time. It simplifies handling changing data in your application, allowing you to react and enjoy each chocolate as it arrives.We will discuss on this in detail below.There are multiple ways to create an observable.When you subscribe to an Observable, it’s like tuning in to a radio station to listen for broadcasts. The Observable represents the source of data, and when you subscribe, you indicate your interest in receiving that data. Just like listening to a friend’s radio station, you’ll receive updates or broadcasts from the Observable whenever new data is available. Subscribing allows you to take actions on the Emitted data, such as displaying it on the screen or performing calculations in your application. Remember to unsubscribe when you’re done listening to prevent unnecessary data processing or memory leaks. ExampleOperators for transforming and filtering observables are powerful tools provided by RxJS that allow you to modify and manipulate the data emitted by observables. These operators enable you to perform various operations on the emitted values, such as mapping, filtering, reducing, and more.Note — Operators are discussed in later section of this article.Combining Observables in RxJS allows us to work with multiple streams of data and perform operations on them collectively. It provides a way to synchronize and coordinate the emissions from different Observables, enabling you to handle complex scenarios in your application. Some of the examples could be merge, concat, combineLatest, ForkJoin.Note — More detailed operations will be discussed in Operators sectionWhen an error happens within an Observable, it emits an error notification, causing the Observable to stop emitting further values. However, to handle errors and keep the execution going, we can utilize the catchError operator.With catchError, we can intercept the error emitted by the Observable and substitute it with another Observable or a default value. This enables us to gracefully handle errors and implement alternative actions or fallback behavior as needed.Let’s see with an example :In order to simulate an error, we intentionally throw an error using the throwError function.To handle this error, we utilize the catchError operator. When an error occurs, catchError intercepts it, logs a message, and returns an Observable that emits a fallback value, in this case, ‘Fallback data’. This ensures that the Observable doesn’t terminate abruptly due to the error.By subscribing to the Observable, we receive the emitted value, which could be either the original data or the fallback value, depending on whether an error occurred. From here, we can perform additional actions or display relevant messages based on the received data.Hot and cold observables represent two distinct behaviors in how data is emitted and received within an Observable.In the case of a cold observable, each new subscription triggers the production and emission of data from the beginning. This ensures that each subscriber receives its own set of values independently, starting from the initial data point.Conversely, a hot observable shares a common data stream among multiple subscribers. When a new subscriber joins, it begins receiving values from the moment of subscription, potentially missing any data emitted prior to that point.Let’s see an example:In this example, the cold observable independently emits ‘Value 1’, ‘Value 2’, and ‘Value 3’ to each subscriber. The cold subscriber receives all the values without any overlap.In contrast, the hot observable continuously emits a ‘Hot Value’ every second. The hot subscriber joins the stream at a specific point, receiving values from that moment onward (‘Hot Value 3’, ‘Hot Value 4’, etc.). It may miss the earlier emitted values (‘Hot Value 1’ and ‘Hot Value 2’) since they were emitted before the subscription.Subjects in RxJS serve as both producers and consumers of data, bridging the gap between the non-reactive and reactive paradigms. They enable the multicast of values to multiple subscribers by maintaining an internal list of subscribers and automatically distributing emitted values to all active subscribers.To create a Subject in RxJS, you can use the Subject class provided by the library. Once you have created a Subject, you can use it to emit values and subscribe to those values.To subscribe to a Subject we can use the subscribe() method.In addition to the above example where we subscribed to the subject, we can broadcast values like:When the next() method is invoked, the Subject broadcasts the provided values to all its active subscribers. In our example, the callback function within the subscribe() method is triggered, and it logs the received values to the console. This mechanism allows the Subject to efficiently propagate the values to all subscribers, ensuring that they receive the updated data in a timely manner.Multicasting with subjects refers to the capability of subjects to share a single data source with multiple subscribers. When multiple subscribers are connected to a subject, it acts as a central hub, delivering the same set of values to all subscribers simultaneously.With multicasting, the data is emitted only once and distributed to all active subscribers at the same time. This eliminates the need for separate, independent executions of the data source or redundant computations.Subjects in RxJS, such as Subject and BehaviorSubject, have built-in support for multicasting. They maintain an internal list of subscribers and automatically distribute emitted values to all active subscribers. This enables efficient data sharing and avoids unnecessary repetition of data emissions.Let's see this in action:A single source of data (the subject) is shared among multiple subscribers, allowing them to receive the same set of values concurrently.BONUS: How is Subject any different from Observable?An Observable is a unicast source, meaning it emits values to a single subscriber. Each subscription to an Observable creates a separate execution path, and the emitted values are not shared among subscribers. Each subscriber will receive its own independent sequence of values. Observables are useful when you want to handle data streams separately for each subscriber.A Subject, on the other hand, is a multicast source. It can maintain a list of multiple subscribers and broadcast (or multicast) emitted values to all active subscribers simultaneously. When a value is emitted from a Subject, all subscribed observers will receive the same value. Subjects are useful when you want to share values among multiple subscribers or when you want to act as an intermediary for multicast behavior.There are four types:Due to this initial value-storing ability, BehaviorSubject is usually preferred over Subject when state management and caching requirements are involved.3. ReplaySubject: this is a variant of a Subject in RxJS that offers the ability for subscribers to receive multiple or all previously emitted values from the subject, regardless of when they subscribed. Unlike a regular Subject or BehaviorSubject, a ReplaySubject keeps a buffer of emitted values and replays them to new subscribers. The buffer size can be customized to determine how many past values are stored and replayed to subscribers.the ReplaySubject is created with a buffer size of 3. It means that the subject will keep the last 3 emitted values in its buffer. When a new subscriber subscribes to the subject, it will immediately receive those buffered values in the order they were emitted.A ReplaySubject offers more flexibility with its configurable buffer size and the ability to replay all values emitted so far. If you need fine-grained control over replaying past values or want to store a larger buffer of values, a ReplaySubject would be a better choice.4. AsyncSubject: An AsyncSubject is another type of subject in RxJS with its own distinct behavior. It is similar to other subjects like Subject, BehaviorSubject, and ReplaySubject in that it can act as both a producer and a consumer of data. However, the main difference lies in how it handles the emitted values.With an AsyncSubject, only the last value emitted by the subject is delivered to its subscribers, and only when the subject completes. This means that subscribers will not receive any values until the subject is completed, and they will receive only the last emitted value.How does it work? Let’s see through an example:We create an AsyncSubject called asyncSubject. We simulate an asynchronous operation by using setTimeOut to emit three values at different intervals. Finally, we complete the subject after emitting the final value.When we subscribe to the AsyncSubject, we log the received values and completion status. However, notice that the subscription is made before any values are emitted. After running the example, we receive:From the output, we can observe the following:Note: It’s important to remember to call next() to emit values and complete() to complete the AsyncSubject; otherwise, subscribers won't receive any value.Part-1 of this article series comes to an end, covering the fundamental concepts of RxJS. In Part-2, we have delved deeper into advanced topics such as Operators and Schedulers.priyank-bhardwaj.medium.comStay tuned for a more in-depth exploration.If you like this article then please do clap your hearts out, share with your friends and follow me for more content like this.Happy learning!Bit’s open-source tool help 250,000+ devs to build apps with components.Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.bit.dev→ Learn moreSplit apps into components to make app development easier, and enjoy the best experience for the workflows you want:bit.devblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.ioblog.bitsrc.io----3Bits and PiecesTech aficionado weaving digital wonders with Angular, JavaScript, .NET, NodeJS. Unleashing innovation, one line of code at a time.HelpStatusWritersBlogCareersPrivacyTermsAboutText to speechTeams