RxJs most common methods

Component Inputs:

With the changing values of your component with time, you would like to do something with that data inside your component. To react to those changes, you usually implement the NgOnChanges method. It works fine all the time but on asynchronous data. For those dependencies, we have RxJS. The only bad part is that it has no native support for component inputs to be streamed as of now.

To overcome the issue and enjoy the full potential of RxJS on changing component inputs, I rely on the following pattern:

@Input() public amount: number;
public amount$ = new Subject();public ngOnChanges(changes: SimpleChanges): void {
  if (changes.amount && changes.amount.currentValue !== undefined) {
    this.amount$.next(changes.amount.currentValue);
  }
}

As per the laws of JavaScript, the `!== undefined` is only needed in case the new input value could be evaluated to `false`.

Button Clicks:

Let us suppose you want to reset an ongoing RxJS-based counter by clicking a reset button. One of the most direct methods that I know is to create a new `onReset$` Subject which you can then weave into your counter-stream setup.

<button (click)="onReset$.next()">Reset</button>

Also Read: A Technical Comparison of Flutter and React Native

HTTP Requests: 

In some cases, retrieving data is not as simple as it seems. We rely on other asynchronous data most of the time. So, we can have the following mental model for those situations:

As soon as I get data X, I want to load data Y (which relates X)

                   You can even extend the above message as shown below:

And if that's really your goal, you can use the switchMap-operator. Here are some examples of retrieving the bookmarks of our current users.

public bookmarks$ = this.currentUser$.pipe(
switchMap(user => this.bookmarksService.getBookmarks(user.id)),
);

I really hope this helped some of you to get started in the world of Angular and RxJS, as it can be quite a bit intimidating at first.

Why choose Oodles Technologies for SaaS App Development?

We are a SaaS app development company that provides end-to-end SaaS app development services using Angular and other leading frameworks. Drop us a line at [email protected] for any technical assistance.