Ion menu item link does not work

Hi,
ion-item is not clickable on my menu and I am wondering why.
only an ion-button is working.
The one on red is not working and the one on blue is working.
I would appreciate if you can help me to fix the red one because it is what I need.

Thanks

I’d look at the sidemenu starter for reference, as well as looking at your browser console to see if there are any errors.

          <ion-menu-toggle
            auto-hide="false"
            *ngFor="let p of appPages; let i = index"
          >
            <ion-item
              routerDirection="root"
              [routerLink]="[p.url]"
              lines="none"
              detail="false"
              routerLinkActive="selected"
            >
              <ion-icon
                slot="start"
                [ios]="p.icon + '-outline'"
                [md]="p.icon + '-sharp'"
              ></ion-icon>
              <ion-label>{{ p.title }}</ion-label>
            </ion-item>
          </ion-menu-toggle>

This is pulled from our sidemenu starter and works just fine.

The first thing i see is that the code marked in red has some typo/ spacing errors… space can be seen in the other <ion-item> that is seen after the red marked code

<ion-item lines="none" button="true" [routerLink]="['favorites']">
</ion-item>

Basically you are missing a space between button and [routerLink] property

second, the spacing issue is also there in the <ion-item> wrapped inside of the ion-button, however, the only reason it is working because you have [routerLink="*"] set on the button.

I suggest you format your code using a prettier or some other code-formating plugin of your choice…

1 Like

Thanks for the second set of eyes @nvispute!

1 Like

:slight_smile: no problem glad to have assisted

Thank you very much for your answer! I have tried it but It is not working.
There is no error on the console. No action is triggered when I click on the menu item

Thank you for your suggestion on my format :slightly_smiling_face:

I finally dit this as a solution! Not the best way but It is working:

However the arrow is not looking good :