Angular reloading component does not work

Question

I am just trying to reload the component without refreshing the page.

Here is the code for that:

import { Component, VERSION, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router'

@Component({
  selector: 'my-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit  {

  name = 'Angular ' + VERSION.major;
  time = new Date().getSeconds();

  constructor(private route: ActivatedRoute, private router: Router){

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;

    this.time = new Date().getSeconds(); //updating the time on load.
  }

  ngOnInit(){
    console.log('iniit');
  }
}

In my html I have a button to reload the component by navigating to the url again. Please advice if I am wrong

<hello name="{{ name }}" time="{{time}}"></hello>
<p>
  Start editing to see some magic happen :) {{time}}
</p>

<a [routerLink]="['/home']">Go to Home </a>

When I click on the button, it is supposed to update the time because of the component reload. But whenever I click on the link, no update happens on the time.

Can anyone advice me how to reload the component when we need without reloading my window (window reload kills my auth info).

Live demo

Why do you want to reload the whole component when you only need the updated time? — Kata, Jul 27 '20 at 06:37
I suggest you to refresh time only in the component. No component reloading required in this scenario. Also, share your routing module. — Durgesh Pal, Jul 27 '20 at 06:40
I think its just a example of problem not actual problem he is solving. — Pavel B., Jul 27 '20 at 06:53

score 3 · Accepted Answer · edited Jul 27 '20 at 06:57

so problem is that angular know you are routing to the same page you are on. So first of all you have to tell angular to reload when you route to the same route you are on.

Like this:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: "reload"})],
  exports: [RouterModule]
})

Then you have to tell angular if you want to always run you route guards. (optional)

{
  path:"home",
  component: HomeComponent,
  ... your guards ...
  runGuardsAndResolvers: "always",
}

And there is more to it, but here if you need.

Demo: https://stackblitz.com/edit/angular-ivy-g29jum?file=src%2Fapp%2Fapp.route.module.ts

Angular reloading component does not work

1 Answers1