Angular5, on routing, url changes but it doesnt load the same page

Question

On click next, URL is getting change but the page, as per url doesn't load. when I click next, url changes and if I refresh the page using same url then it loads the correct page. Below is my ts and html code.

on ts

  ngOnInit() {
    const queryParams = this.route.snapshot.queryParams; // store query param value
    this.index = queryParams.index;
    this.step = queryParams.step;
    this.flowType = queryParams.flowType;
    this.stepper.selectedIndex = Number(this.step);
    console.log(this.index, "this.index", this.step, "this.step",  this.flowType, " this.flowType");
  }

on HTML

<div *ngIf="flowType === 'Prescription Drug Plan'">
  <app-form-navigation   (customHandle)="setApplicationQualification()" isQueryParamPreserve='true'
    nextPath="enrollments/steps/find-a-drug" [queryParams]='{index:2, step:0}' >
  </app-form-navigation>
</div>

Can you create minimal reproducible example on stackblitz? – alt255 Jul 20 '19 at 18:49 — alt255, Jul 20 '19 at 18:49

score 1 · Accepted Answer · answered Jul 20 '19 at 19:18

Angular won't reload the same component if you don't navigate away from it. you should use something similar:

constructor(protected route: ActivatedRoute){
}
ngOnInit(){
    this.route.queryParams.subscribe(params => this._init(params));
}
_init(queryParams){
    this.index = queryParams.index;
    this.step = queryParams.step;
    this.flowType = queryParams.flowType;
    this.stepper.selectedIndex = Number(this.step);
    console.log(this.index, "this.index", this.step, "this.step",  this.flowType, " this.flowType");

}

score 0 · Answer 2 · answered Jul 21 '19 at 08:00

As stated in other answers and other threads, angular will not reload the same route unless you navigate away then back to it. If you still need to refresh the whole page instead of re-initializing your class variables, check this answer: https://stackoverflow.com/a/49509706/11394663

Inspired by the previous answer, here is my solution to refresh any route (using navigateByUrl to preserve the params):

constructor(
  private router: Router
) {
}

refreshRoute() {
  const url = this.router.url;
  this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigateByUrl(url));
}

Angular5, on routing, url changes but it doesnt load the same page

2 Answers2