HubFirms

HubFirms : Blog -Angular Basics: Refresh an Angular Component without reloading the same Component

Angular Basics: Refresh an Angular Component without reloading the same Component

Angular Basics: Refresh an Angular Component without reloading the same Component

On the off chance that you are working with Angular and need to invigorate a segment without route on another segment without utilizing window.location.reload() or location.reload(), you can utilize the accompanying code in your undertaking: 

mySubscription: any;

At that point, add this code to the necessary segment's constructor. 

this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};
this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

 Make a point to withdraw from this mySubscription in ngOnDestroy(). 

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

 Here, we simply stunt the switch into accepting that the last connection was never visited; when the catch is clicked, the program will stack that part (invigorating the segment). 

This piece will work in Angular 2, 4, 5, 6, 7, and 8.

Author Biography.

Hub Firms
Hub Firms

HubFirms is one of the world’s largest online publications that delivers an international perspective on the latest news about Internet technology, business and culture.

Related Posts