CODEWITHSUNDEEP
angulartypescriptangular7
Victor
Victor

Reputation: 125

How to reload a entire component with angular when route changes?

I want to reload or rerender a sidebar component when route change i have the following code:

  constructor(
    private auth: AuthService,
    private router: Router,
    private changeDetector: ChangeDetectorRef
  ) {
    this.auth.currentUser.subscribe(x => this.userData = x);
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
        this.changeDetector.detectChanges();
        console.log('enter');
      }
    });
  }

This enter to show the log 'enter' but not reload the component. Anybody can help with an example?

Upvotes: 1

Views: 635

Answers (2)

Chamindu
Chamindu

Reputation: 26

If you want to reload the entire page, just use

window.location.reload();

Upvotes: 0

Rahul
Rahul

Reputation: 2128

Usually component routing doesn't reload because angular works as SPA(single page application) - but you can make your components to load in order to reduce the browser size if that is the only case

Use href and your path name insted of routerLink on your sidebar anchor link - this will make your component to reload everytime when you click - everytime it will load all your js from server - if you are using lazy load this process is not the right way - this will only helps you to reduce the browser RAM usage on every click and doesn't maintain any previous data but routing will work as the same

So href will be the word for your question - but make sure that you really want to load your components

Hope it helps - Happy Coding:)

Upvotes: 1

Related Questions