Using routerLink with a function call

Question

I am trying to use routerLink with a function as follows:

<a class="nav-link" [routerLink]="callHome(data)">Home </a>

callHome(data){
   //perform some operations
   this.router.navigate(["/home"]);
}

The problem here is whenever I refresh the page, without even clicking on Home, it automatically navigates to /home.

Another alternative I tried is:

<a class="nav-link" [routerLink]="['/home']">Home </a>

Here, although it works, I am not able to do the operations before navigating.

I cannot use a button and use (click) because I want it as a link as well. If I use a button, the link is gone.

How can I use [routerLink] alongwith a function call?

Answer 1

You simply must affect the string value of the route.... like this:

callHome(data){    
    //perform some operations    
    return "/home"; 
}

As stated in that stackoverflow: Angular 5 click bind to anchor tag

You probably want to add the class btn to the tag to make it works like this:

<a class="btn" (click)="callHome(data)">Home </a>