user image

Shilpa
Published in : 2022-03-02

How to reload Angular component without refreshing page?

Angular

I am using Angular 10 and it is `single page application`, so I want to avoid refreshing the page using `window.location.reload()` or `location.reload()`.

What are the way/ways to achieve refreshing sub-component values without using typescript's programmatic reload() function? 

 

Comments

Rakshit Date : 2022-03-06

Best answers

34

Best answers

34

You can do it by tricking the router event, and tell them that - you didn't visit the page.

this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Tell the router that you didn't visited last link and so it wasn't previously loaded
    this.router.navigated = false;
  }
});

Hope it helps!

Source: Refresh Angular component without reloading or refreshing a page.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Import Swiper into Angular causes error
Publish date: 2022-03-05 | Comments: 1

Tag: Angular

Angular - PrimeNG charts adding colors for each legends dynamically
Publish date: 2022-02-27 | Comments: 1

Tag: Angular

How to call event handler onload for Angular application?
Publish date: 2022-03-02 | Comments: 2

Tag: Angular

How to translate Angular application easily?
Publish date: 2022-03-03 | Comments: 2

Tag: Angular

Angular: Change columns to rows, and rows to columns while running a *ngFor loop.
Publish date: 2022-03-06 | Comments: 0

Tag: Angular