Conditional routing in routerLink if URL exist Angular 4

Question

I am generation a side navigation, some of the objects have URL property and some don't (they are used for generating submenu).

my HTML template looks like this

<li *ngFor="let menu of navMenu;index as i" routerLink="{{menu.url}}">
....some stuff
</li>

I need that if the menu.url exist then do the routing , else do nothing , right now if menu.url don't exist it goes to / route.

Sajeetharan · Accepted Answer · 2018-02-17 16:32:55Z

2

Just add a check using *ngIf

<ng-container *ngFor="let menu of navMenu;index as i">
  <li *ngIf="menu.url"  routerLink="{{menu.url}}">
    ....some stuff
  </li>
</ng-container>

answered Feb 17, 2018 at 16:32

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gaurav_soni Over a year ago

But I want to render the li

Gaurav_soni Over a year ago

Yea that can be done ... but is there someway I can set value of menu.url to something that it does not do the routing

Sajeetharan Over a year ago

you can use conditional routing as

Sajeetharan Over a year ago

Gaurav_soni Over a year ago

It worked , one update <button [routerLink]="menu.url? [menu.url] : []"></button>

Jota.Toledo · Accepted Answer · 2018-02-17 17:09:48Z

2

Assuming that menu.url has an absolute path, just do something like:

<li *ngFor="let menu of navMenu;index as i" [routerLink]="menu.url ? [menu.url]: []">
....some stuff
</li>

answered Feb 17, 2018 at 17:09

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

3 Comments

Gaurav_soni Over a year ago

Tried the conditional routing also but , the [] matches to "/" route. I need it to ignore the routing

Jota.Toledo Over a year ago

What do you mean by "ignore the routing"? When menu.url is null, no link should be generated? (basically clicking on the li element would have no effect)

Gaurav_soni Over a year ago

You are right , I was having some other issue thats why it was getting routed to the / , after correcting , it says at the same route thanks

Collectives™ on Stack Overflow

Conditional routing in routerLink if URL exist Angular 4

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related