[Fixed] router.navigate changes the URL, but is not rendering the component


Instead of using <a href="/my-path/{{my_param}}"></a> in my template, I am willing to use a function with paramters to redirect me to a page.

So, this is how I built my function in my .ts file:

    this.router.navigate(['./my-path/' + my_param ]);

And how I called it in my template:

 <div (click)="redirectToChat(my_param)">

It changes the URL, but not rendering the component.
I imported this in my component:

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

And I used it in my constructor: private router: Router

Can you help me to render corrctly the component? How else can I redirect the user to the page using a function?


You are mixing navigate (to component) with navigate by url.
Have you tried navigateByUrl?

this.router.navigateByUrl('./my-path/' + my_param);

Leave a Reply

(*) Required, Your email will not be published