I am using ionic 6 with angular. I have been trying to remove the ion-activatable class from an ion-item. I have tried getting the ElementRef of the ion-item and using “ionItemElementRef.nativeElement.classList.remove(“ion-activatable”)”. It doesn’t work. Similarly,
“ionItemElementRef.nativeElement.classList.contains(“ion-activatable”)” returns FALSE.
Whats interesting is that the output to the console of the classList is:
DOMTokenList [value: ‘’]
0: “item-interactive”
1: “item-select”
2: “item-has-placeholder”
3: “ion-color”
4: “ion-color-gainsboro”
5: “item”
6: “md”
7: “item-lines-none”
8: “item-fill-none”
9: “ion-activatable”
10: “ion-focusable”
11: “hydrated”
length: 12
value: “item-interactive item-select item-has-placeholder ion-color ion-color-gainsboro item md item-lines-none item-fill-none ion-activatable ion-focusable hydrated”
so the class clearly exists yet classList methods do nothing to it.
Then I tried using [ngClass]=”{‘ion-activated’:false}” in the ion-item in the html template. That doesn’t work either.
Finally, I tried [class.ion-activatable]=“false” in the ion-item in the html template, which also doesn’t work.
My question is , in general, how do you remove or add a class to an ionic component at runtime?
Thanks for your help everyone.