Conditionally add RouterLink or other attribute directives to an element in Angular 2
AngularAngular Problem Overview
In Angular 2 if I have an element like <button></button> how can I conditionally add an attribute directive like [routerLink]="['SomeRoute'] to it?
Angular Solutions
Solution 1 - Angular
Or you can simply add a condition to the attribute.
<button [routerLink]="myVar ? ['/myScreen'] : []"></button>
Redirect to '/myScreen' only if myVar is true.
Solution 2 - Angular
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
Solution 3 - Angular
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>
Solution 4 - Angular
<div [ngClass] ='{"disabled-link":!isMicrositeEnable,"cursor-pointer":"isMicrositeEnable"}' [routerLink]="isMicrositeEnable ? ['/microsite'] : []">
Solution 5 - Angular
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>
Solution 6 - Angular
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
Solution 7 - Angular
This worked for me in Angular 10:
<button routerLink="{{MyVar == true ? '/route/' + item.id : '/same/route'}}"></button>
Solution 8 - Angular
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.