sami_analyst sami_analyst - 1 month ago 9
Sass (Sass) Question

Firing event on disabled button

I want to fire a event on a disabled button

<button ion-button icon-only [disabled]="!isConnected" (click)="openModal()" (disabledClick)="showErrMsg()" shortVibrateOnTap>
<ion-icon ios="ios-swap" md="ios-swap"></ion-icon>
</button>


and if this is not possible, how do I style a button like it is disabled ?

Answer

The disabled class of ionic sets opacity: 0.4; on the disabled buttons that gives the visual effect and pointer-events: none; that prevents any events from firing.

So if you want to make a button to look like disabled you should create a class

.disabled {opacity: 0.4;}

Or else you can wrap the button with a div and attach a click event on it:

 <div (click)="showErrMsg()">
    <button ion-button icon-only [disabled]="!isConnected" (click)="openModal()"  shortVibrateOnTap>
        <ion-icon ios="ios-swap" md="ios-swap"></ion-icon>
    </button>
</div>

In your showErrMsg function make your code to run only when !isConnected