Conditionally apply either href or routerLink without *ngIf

Question

I have the following code in my Angular app template, which does not work as expected:

<ng-container *ngFor="let item of items"">
   <a class="link"
      [attr.href]="item.url"
      [routerLink]="item.routerLink"
      rel="noopener noreferrer"
      tabindex="-1"
   >
     {{item.label}}
   </a>
<ng-container>
...

What I'm trying to do here is to iterate through an array of items and display list of links. The problem is that the item can either have url property, or routerLink. Depending on which property an item has, I need to either apply href attribute, or routerLink.

Is there a way to do that without using *ngIf which causes code duplication?

score 4 · Answer 1 · answered Mar 15 '19 at 15:50

4

I suggest that you move the strategy to the component.ts

<a (click)="navigateToLink(item)">

and

navigateToLink( item ){
   if( item.routerLink ){
      this.router.navigate([item.routerLink]);
   }else if( item.url ){
      this.windows.open(item.url);
   }
}

answered Mar 15 '19 at 15:50

Wandrille

6,267
3
20
43

2

I literally thought the same thing, (that's what I would have done or just using the *ngIf. I don't know if he just doesn't want to use `ifs` for a particular reason – Patricio Vargas Mar 15 '19 at 15:52
This is not recommended. href and click are different things, and click is likely to have poorer usability – cbp Mar 24 '21 at 14:43

Patricio Vargas · Accepted Answer · 2019-11-07T02:51:02.190

1

Try the following

 <ng-container>
       <a class="link"
          [attr.href]="item.url ? item.url : ''"
          [routerLink]="item.routerLink ? item.routerLink: ''"
          rel="noopener noreferrer"
          tabindex="-1"
       >
         {{item.label}}
       </a>
    <ng-container>

edited Nov 07 '19 at 02:51

answered Mar 15 '19 at 15:45

Patricio Vargas

5,236
11
49
100

Conditionally apply either href or routerLink without *ngIf

2 Answers2