How to Refresh an Angular Component Without Reloading the Whole Page (Angular 2+ Guide)

TL;DR — Learn how to Refresh Angular Component Without Reloading The Page, This quick guide with Simple snippets and tips will save you a lot of time.

Are you struggling to refresh Angular components without a full page reload? This guide will explain you simple yet effective technique to achieve your purpose for sure.

Step-by-Step Guide to Refresh Angular Components Without Full Page Reload:

If you are working with Angular and need to refresh a component without navigation on another component without using window.location.reload() or location.reload(), you can use the following code in your project:

Step 1: Setting up the Router for Component Refresh

You can simply create your new component or use the existing one, and then add the below code.

Step 2: Subscribing to Router Events

someSubscription: any;

Then, add this code to the required component’s constructor.

this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
this.someSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
// Here is the dashing line comes in the picture.
 // You need to tell the router that, you didn't visit or load the page previously, so mark the navigated flag to false as below.
    this.router.navigated = false;
}
});

Step 3: [Must important] Cleaning up with ngOnDestroy

Make sure to unsubscribe from this someSubscription in ngOnDestroy().

Tip: Always unsubscribe from observables in ngOnDestroy() to avoid memory leaks.

ngOnDestroy() {
if (this.someSubscription) {
this.someSubscription.unsubscribe();
}
}

Here, we are telling the router to think that, the last page it visited was never visited actually; when the button is clicked from component 1, the program will load that same component again (refreshing the component).

Note: The above-given snippet will work in Angular 2+ versions (i.e., 2, 4, 5 to 17 — all the latest versions too). (Updated)

Refresh components in Angular | Trick the router[/caption]

Image by Author prepared on MS Paint

Share your thoughts on this if you find an alternative for your case.

“By sharing knowledge, it will always increase” — The Rax

Have you tried this method in your Angular projects? Share your experiences or any alternative solutions in the comments below!

Appendix:

In case you are finding any of the below questions, this article is made for you.

• Refresh Angular component without reloading
• Angular component refresh
• Angular 2+ component reload
• Refresh Angular component dynamically
• Reload Angular view without full page refresh
• Angular router refresh trick
• Angular refresh component on button click
• How to reload Angular component without full page reload
• Refresh an Angular component when data changes

I obtain an immense amount of satisfaction from helping others attain their goals and reach their potential through technology. Even if you wish to reach out and say “Hello”, I sincerely appreciate all of the wonderful correspondence I receive each day from readers. You all enrich my life, and I hope I am able to do the same for you all as well.

If you find joy and value in what I do, please consider supporting my work with a donation — however much you can afford, it means and helps more than you can imagine.

You can give tips too using Buy me a coffee.

Your support will be appreciated.

If you have any concerns or questions, Feel free to connect with me or Connect on Medium.

You may also Like,

• Best Way To Add Country Flags Icon In Angular
• Angular Basics: Read Data From External File On Your Prod Build

FAQ