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
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
I finally dit this as a solution! Not the best way but It is working:
However the arrow is not looking good :