Disabling the ion-row


#1

I’ve placed a click event on ion-row tag, based on certain certain condition I want to disabled the ion-row to prevent it from clicking.

Is there anyway to stop the click event? I’m unable to place [disabled] in ion-row :frowning:

Please help!


#2

you want to set click event based on certain condition then you can get that by maintaining two row tag

<ion-grid>
<ion-row *ngIf="yourcondition=true" (click)="yourfunction()"></ion-row>
<ion-row *ngIf="yourcondition=false" ></ion-row>
</ion-grid>

if you are not set click event in certain condition then how can you click the row ? :wink::wink::wink:


#3

Bro ngIF will surely gonna hide my row?
I want to show the row but disable the click event.


#4

You can disable pointer events via CSS so that the button isn’t clickable. You just need to set it to toggle based on your tap() event firing


#5

no no it will not hide your row
you can display same data in both your column in ion-row tag.
jut copy paste you column and apply above logic
it will work as if else condition nothing else


#6

Actually the ion-row having ngFor and I dont want to repeat ion-row two times :confused:


#7

then you must have to do it in your ts file in your click event


#8

Do you know how this gonna work?

(click)="isDisabled ? $event.stopPropagation() : myClickHandler($event);>

I’ve got this from: https://stackoverflow.com/questions/39346799/how-to-disable-the-div-tag-in-angular-2

How $event.stopPropagation() works?


#9

may i know what you exactly want output ?
you want to just disable the click event in certain row right ?


#10

Okay so actually what I’m doing is getting a list of appointments and they have a Due date.
I’m checking it with the current date to verify the appointment is valid or expired.
The valid appointments will be clickable and the expired one wont.

You got my point?


#11

it’s too easy
nothing to do in html.
you just have to pass the item object in click event function as parameter and in ts file you have to write if condition and compare the date of item object sent by click event with current date.if it is valid then your code shoul be apply else just write return; mean nothing to do if date is not valid