How to Refresh angular component without reload or navigation on another component

Hello,

In this article i want to show you how to refresh angular component without reloading the navigation page. So if you are working with angular and when you need to refresh component without navigation on another component or instead of using window.location.reload() or location.reload(), you can follow below code in your project:

mySubscription: any;

Adding following code snippet to the required component's constructor will work.

  this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};
   this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
        this.router.navigated = false;
  }

});

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

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

}

Here we just trick the router into believing that, last link was never visited, and on click of button, it will load that component (Refreshing the component).