Button Router link is not working angular

Question

I am trying to figure out how to give the routerLink path in button. If I give the full path, the below router code is working and I am able to see that page.

[routerLink]="['/home',{outlets:{homeOutlet:':product/import/103'}}]"

But I have variables instead of task and id and I tried the following and not working.

[routerLink]="['/home', {outlets:{homeOutlet:':(this.productStore.activeProduct$.getValue().productName)/import/this.productStore.activeProduct$.getValue().id'}}]">

How can I solve this issue? Please advice.

Answer 1

This will probably work if you move it to the typescript code

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

  constructor(private router:Router){}

    public navigate() {
       string path = ':' +this.productStore.activeProduct$.getValue().productName +'/import/' + this.productStore.activeProduct$.getValue().id
       this.router.navigate(['/home', { outlets: { homeOutlet: [path] } }]);
    }

Then on your html file remove the attribute [routerLink] and just add (click) = "navigate()"