ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: IonItem styling wrong when standalone angular component is used with routerLink

Open whydoievenneedthis opened this issue 7 months ago • 0 comments

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Given an ion-item tag with a routerLink on it, when a standalone angular component only imports the IonItem component, the ion-activatable and ion-focusable classes are not generated, giving the element a text-like feel. When the whole IonicModule is imported, the two classes above are generated, giving the element a button-like feel.

Expected Behavior

Regardless of whether IonItem or IonicModule is imported, the generated HTML element behaves the same way and generates with pointer cursor and alternative hovering color when a routerLink is defined.

Steps to Reproduce

Just hover over the generated ion-item. When the IonItem is imported, the cursor remains an arrow and the background color does not change. When the IonicModule is imported, the cursor changes into a pointer and the background color changes towards gray.

Code Reproduction URL

https://stackblitz.com/edit/prza28ny?file=src%2Fapp%2Fexample.component.html,src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.routes.ts

Ionic Info

Don't know how to do that on stackblitz.

Additional Information

My current workaround is that I add href="#" (click)="(false)" to the element, but it would be nicer if I didn't have to do it.

whydoievenneedthis avatar May 07 '25 14:05 whydoievenneedthis