Search for a command to run...
DoyinSoft Technologies is a software development company that helps businesses expand their audience reach.
Always efficient, reliable, and secure, our solutions run smoothly across all browsers and devices.
No comments yet. Be the first to comment.
https://www.fiverr.com/share/L75ovQ Are you an entrepreneur? Are you planning on starting a new business? Don't limit yourself to the small market. Get your business or store online and meet your next client with this smart move. We provide the follo...
Growing up, I wasn't born with a silver spoon in my mouth. I was raised by a single parent. I did so many things to make ends meet. Before I got into the university to study computer science, I was already using my N70 phone back then in 2007 to cod...
Let’s quickly discuss why schools, business (es), and companies need a website in the first place: • You can reach a wider audience. First of all, there is no longer a geolocation dependency. Thus, you greatly increase your reach. Moreover, you can r...
Async Await Calls
Founded in 2006 by Zainuddin Nafarin, Smadav Software (Smadsoft) is an innovative software developer focused on developing specialized security produc
Don’t let your app get sluggish, handle your subscriptions
In my early Angular days, I would subscribe to observables without unsubscribing before the app was destroyed, possibly leading to a build up of memory leaks. For example:
A simple way to avoid this is to save a reference to the subscription and unsubscribe in the ngOnDestroy lifecycle method. For example:
This is better, but what if you have a bunch of subscriptions in your component? There’s a nifty rxjs operator you can use for that.
You can create a subject, ngDestroy$ and pipe each subscription with the takeUntil operator. Now you can just add the .pipe(takeUntil(this.ngDestroy$)) before all subscriptions that you want to cancel when the component is destroyed.
Warning: if you have a method creating a subscription for each input change for instance the component below:
You could be possibly overlapping requests and previously requests that finish after subsequent ones can overwrite your fresh data. In this case, you want to make sure if you call the loadData method a second time, you cancel any previous requests first.
To solve this issue, you can either have a variable to store the subscription reference (solution 1) of the request in the loadData method, or you can reset the ngDestroy$ subscription every time before calling making the HTTP request again:
The above method somewhat limits the usefulness of the ngDestroy$ variable if you are using it for other requests as well, since those will be reset if the Input value changes.
Feel free to play around with the different methods and see what works for you with your particular circumstances!
If you like this article, check out my other articles on Angular and feel free to follow me to never miss a new article.
My Angular Tutorials on YouTube
