RxJs most common methods
Posted By : Avinash Kumar | 29-Dec-2020
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 in case there is a pending Y-request (related to a previous X), I want to cancel that one.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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Avinash Kumar
Avinash is a Front-End Developer, having good knowledge of HTML, CSS, Bootstrap and Javascript. His hobbies are internet surfing and likes to listen music.He is dedicated towards his work.