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?

score 23 · Accepted Answer · answered Oct 18 '18 at 16:44

23

You should be able to place a (click) handler on the link element.

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

It should perform the (click) handler prior to navigating with the router link.

answered Oct 18 '18 at 16:44

Wrokar

963
7
17

cool, this is really a great idea. Also you can `toggle` navbar on `ngInit()` – C Alonso C Ortega Mar 17 '20 at 01:21
2

What if doSomeLogic() function also determines in which route must [routerLink] navigate to? – Ani Naslyan Jun 15 '20 at 09:07

score 6 · Answer 2 · answered Jun 04 '19 at 11:48

6

You can try like this also.. If you have manipulation in routerlink..

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

It works in both methods..

<a class="nav-link" routerLink="{{otherMethod()}}" (click)="callHome(data)">Home </a>

I have tried it in angular 7, it is working..

answered Jun 04 '19 at 11:48

Deepa

850
1
10
11

This worked just fine for my case which is similar to OP – David Neto Oct 10 '19 at 15:00

score 5 · Answer 3 · answered Oct 18 '18 at 16:52

5

Simply add a (click) event to the <a> tag as well. See this stackblitz in action.

answered Oct 18 '18 at 16:52

Felix Lemke

6,189
3
40
67

JFPicard · Answer 4 · 2018-10-18T16:52:48.127

3

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>

edited Oct 18 '18 at 16:52

answered Oct 18 '18 at 16:39

JFPicard

5,029
3
19
43

If I change to a button I don't get the link option. – helloworld Oct 18 '18 at 16:41
What I mean is, I don't get an option to open in a new tab when right clicking on the button – helloworld Oct 18 '18 at 16:42
If you want to open it always in a new tab, you could do: this.window.open("/home"); in your click. – JFPicard Oct 18 '18 at 16:47
Thanks, but actually I don't want to always open in new tab, just want it the option to be present – helloworld Oct 18 '18 at 16:49
1

This should be the accepted answer for the asked question. In my opinion, you should never blindly rely on a priority or order of execution. – schaenk Feb 25 '22 at 12:57

Todd Hale · Answer 5 · 2022-01-09T17:57:46.523

0

I am using Angular with Ionic, and I had to set the routerLink to null and use the (click) event.

<ion-item routerLink="{{null}}" (click)="logOut()" lines="none" detail="false">
  <ion-icon slot="start" name="log-out-outline" class="log-out-icon"></ion-icon>
  <ion-label>Log Out</ion-label>
</ion-item>

This ensures you get NO ionic routing animations AND full keyboard accessibility.

edited Jan 09 '22 at 17:57

answered Jan 09 '22 at 02:40

Todd Hale

480
8
15

Using routerLink with a function call

5 Answers5