Ternary operator with `routerLink` inside the template

Question

Do you know how to use the ternary operator with routerLink?

Now it is like so:

<ion-button *ngIf="event?.evId"
      routerLink="/event/event-details/{{event?.evId}}">
            Cancel
</ion-button>

<ion-button *ngIf="!event?.evId" routerLink="/event"> Cancel
 </ion-button>

I would like to use the ternary operator here and remove one section completely. How to do that?

Note I can do that inside the TS file. But how to do that without using the TS file?

What is wrong with `event?.evId ? '/event/event-details/event?.evId' : '/event'` — Alireza Ahmadi, Jun 02 '21 at 09:52
@AlirezaAhmadi No. It is not working. It takes URL like so: url: `event/event-details/event%3F.evId` — Sampath, Jun 02 '21 at 10:06
How about this: `[routerLink]="event?.evId ? ['/event/event-details/event?.evId'] : [' '/event']"` — Alireza Ahmadi, Jun 02 '21 at 10:13
See [this](https://stackoverflow.com/questions/36753819/conditionally-add-routerlink-or-other-attribute-directives-to-an-element-in-angu) the second answer — Alireza Ahmadi, Jun 02 '21 at 10:15

score 4 · Accepted Answer · edited Jun 02 '21 at 10:13

4

OP's

  <ion-button [routerLink]="event?.evId ? '/event/event-details/'+ event?.evId : '/event'"> 
       Cancel
   </ion-button>

Original

You can bind to any attribute like this

[routerLink]="event?.evId != null ? '/event/event-details/'+event.evId : '/event' "

edited Jun 02 '21 at 10:13

Sampath

58,546
53
279
406

answered Jun 02 '21 at 09:45

Munzer

1,940
2
17
23

No. It is not working. It takes URL like so: `url: "event/event-details/event%3F.evId"` – Sampath Jun 02 '21 at 10:05
sorry, I updated my answer, I missed something, included the property accessor within the string. – Munzer Jun 02 '21 at 10:11

Ternary operator with `routerLink` inside the template

1 Answers1