Conditionally add RouterLink or other attribute directives to an element in Angular 2

Question

In Angular 2 if I have an element like <button></button> how can I conditionally add an attribute directive like [routerLink]="['SomeRoute'] to it?

score 171 · Answer 1 · answered Jun 17 '16 at 12:16

171

Or you can simply add a condition to the attribute.

<button [routerLink]="myVar ? ['/myScreen'] : []"></button>

Redirect to '/myScreen' only if myVar is true.

answered Jun 17 '16 at 12:16

fifix

1,743
2
7
6

1

probably for some older Angular version was OK, in my 2.4.8 this `test` shows `/route/id` – Toolkit Jun 09 '17 at 04:21
3

In Angular 4 this results in an `href` value of `/` when it's not desired. – isherwood Aug 16 '17 at 13:51
I am doing the same thing `....` But I get the following error on page load: **ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'undefined'** – Mahesh Nov 12 '17 at 00:02
8

This worked... :\ `... ` – Mahesh Nov 12 '17 at 00:12
I got an issue like.. Navigate only based on a observable variable (async) response. Please guide me in implementation. – Nanda Kishore Allu Jul 02 '19 at 04:11
1

This fires a click on Angular 8, a click I have no clue how to was handled, nothing happened, except that child component emitted a new observed value – Ayyash Aug 09 '19 at 06:37
5

This does not remove the href in Angular 8, so it's not acceptable. – AsGoodAsItGets Oct 30 '19 at 11:04

score 47 · Accepted Answer · edited Jun 22 '20 at 06:42

47

As far as I know, there is no straight way to do this. There are some workarounds... I used something like this:

<button *ngIf="condition" [routerLink]="['SomeRoute']"></button>
<button *ngIf="!condition"></button>

There is an similar discussion here: link

edited Jun 22 '20 at 06:42

Tomas Vancoillie

2,854
2
30
37

answered Apr 20 '16 at 20:09

Boies Ioan

794
7
11

2

What if you want to display it even if there is no routing? – Julien Feb 23 '17 at 09:15
I think @fifix is the best practice for this question. – Daniel.V Sep 14 '20 at 16:18

score 10 · Answer 3 · answered Jan 06 '20 at 10:24

10

If you don't want to duplicate the element, and just want to prevent clicks depending on the condition, you could do the following:

<button 
  [style.pointer-events]="condition ? 'auto' : 'none'" 
  routerLink="/some/route"
>
</button>

answered Jan 06 '20 at 10:24

Jonathan Dudley

109
1
4

This is fine if you don't need to hide links from external crawlers (i.e Googlebot) but just prevent users from clicking it. – Omiod Feb 26 '20 at 11:36
this is very smart! – C_Ogoo Feb 15 '21 at 22:44
please notice: https://stackoverflow.com/a/36987506/2511298 – Ahmed Hasn. Nov 11 '21 at 10:52

Ashutosh Jha · Answer 4 · 2018-01-02T08:17:38.383

3

   <div [ngClass] ='{"disabled-link":!isMicrositeEnable,"cursor-pointer":"isMicrositeEnable"}' [routerLink]="isMicrositeEnable ? ['/microsite'] : []">

edited Jan 02 '18 at 08:17

answered Jan 02 '18 at 07:46

Ashutosh Jha

13,573
9
48
77

score 3 · Answer 5 · edited Apr 02 '21 at 17:50

3

This is a working sample. When you need to bring more than one condition you can have inner condition as follows

<a class="dropdown-item" href="javascript:void(0);" [routerLink]="app.treatment === 'X' ? ['/route1', app._id] : app.treatment === 'Y' ? ['/route2', app._id] : ['/route3', app._id] ">Go</a>

edited Apr 02 '21 at 17:50

Syscall

18,131
10
32
49

answered Apr 02 '21 at 16:19

Anandan Subbiah

31
1

score 0 · Answer 6 · answered Jul 23 '20 at 06:44

0

Just a detail. Try to avoid using buttons for navigation. Screenreaders wont understand that its a navigation out of the box. You will now need to add an aria-label that tells the screenreaders what it does. This adds more code. But the simple solution would be to add the [routerLink] to an anchor link. Then style it as a button. But I prefer to use the standard blue links because people usually knows what will happen then. ex: I would never try to rightclick on a button and open it in a new tab. So: buttons for operations and anchorlinks for navigation

answered Jul 23 '20 at 06:44

Jens Alenius

1,832
2
15
19

This is a misleading answer. Buttons can be used for navigation since navigation does not always mean an element is a link. It's perfectly ok to use buttons for dropdown navigation, popup menus, etc. (that's still "navigation"). – SimonRabbit Jan 04 '21 at 14:51
@SimonRabbit how do you make your buttons accessible for screen readers? – Frazer Kirkman Mar 30 '21 at 22:38

score 0 · Answer 7 · answered Mar 15 '21 at 22:29

0

This worked for me in Angular 10:

<button routerLink="{{MyVar == true ? '/route/' + item.id : '/same/route'}}"></button>

answered Mar 15 '21 at 22:29

Enrique Henriquez Figueroa

41
6

score 0 · Answer 8 · answered Jun 09 '21 at 10:41

I would not use a button with routerLink. A would use an anchorlink styled as a button to do it. The button element is for operations and anchors is for routing/navigate. Below code will tell the browser/screenreaders etc. what it is.

<a *ngIf="condition" class="make_it_look_like_a_button" [routerLink]="['somehere']">test</a>
<button *ngIf="!condition">Test</button>

The link case above will have 'open in new tab...' when right clicking it. But a drawback is that hardly no one would think of it when it is style as a button.

Conditionally add RouterLink or other attribute directives to an element in Angular 2

8 Answers8

Linked