Gain insights into reactive programming with RxJS 7, explore data streams, error handling, and multicasting to build a recipe app, and learn to test and optimize reactive applications.

angular.tar.gz

angular04

angular05

angular06

coderun

angular04-copy

test

angular07

angular09

angular10

angular11

angular12

angular13

angular13-test

The reactive programming paradigm is designed to make working with asynchronous events and data streams convenient. 

This course teaches you about the reactive programming paradigm and when to choose it over others. You’ll learn to use new RxJS 7 features to create a recipe book web application that lets users browse and share recipes. In this context, you’ll learn about data streams, error handling, and how to combine streams and transform one data stream into another. You’ll develop an understanding of multicasting and caching streams, how to share data between components, perform bulk operations such as file uploads, and perform real-time updates. Finally, you’ll learn how to test a reactive application. To assess your knowledge, there’s a project, coding challenges, and assessments.

After this course, you’ll be able to determine the utility of the reactive paradigm for any application and have mastery over new RxJS 7 features to create robust reactive applications.

Reactive Programming with Angular and RxJS 7

# Managing unsubscriptions

There are two commonly used ways to manage unsubscriptions: imperative and declarative patterns. Let’s look at both of these patterns in detail.

## Imperative unsubscription management

The imperative unsubscription means manually calling the `unsubscribe()` method on the subscription object we manage ourselves. The following code snippet illustrates this. We simply store the subscription inside a variable called `subscription` and unsubscribe from the `ngOnDestroy()` life cycle hook in the `src/app/recipes-list/recipes-list.component.ts` file.

export class RecipesListComponent implements OnInit, OnDestroy {
  recipes!: Recipe[];
  subscription: Subscription;
  constructor(private service: RecipesService) {}

  ngOnInit(): void {
    this.subscription = this.service.getRecipes().subscribe((result) => {
      this.recipes = result;
    });
  }
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

Well, this works fine, but it's not a recommended pattern. There are better ways of using the power of RxJS.

## Declarative unsubscription management

The second way is far more declarative and cleaner; it uses the RxJS `takeUntil` operator. Before we dive into this pattern, let's gain an understanding of the role of `takeUntil`, and there's no better way to understand it than with a marble diagram.

The `takeUntil()` operator takes values from the source observable (the first timeline) until the `Observable` notifier, which is given as input (the second timeline), emits
a value. In the previous marble diagram, the source observable emitted the values of $a$, $b$, $c$, and $d$. So `takeUntil()` will emit them, respectively. After that, the `Observable` notifier emits $z$. So `takeUntil()` will stop emitting values and
complete.

The `takeUntil` operator will help us keep the subscription alive for a period that we define. We want it to be alive until the component has been destroyed, so we'll create an RxJS subject that will emit a value when the component has been destroyed. Then we'll pass this subject to `takeUntil` as input in the `src/app/core/services/recipes.service.ts` file.

Learn about the classic pattern for managing unsubscriptions.

Getting Started

The Power of the Reactive Paradigm

RxJS 7—The Major Features

A Walk-Through of the Application

Fetching Data as Streams

Error Handling

Combining Streams

Assessment 1

Transforming Streams

Multicasting Essentials

Caching Streams

Sharing Data between Components

Bulk Operations

Processing Real-Time Updates

Testing RxJS Observables

Assessment 2

Conclusion

Classic Pattern for Managing Unsubscriptions

Managing unsubscriptions

Imperative unsubscription management