ion-button Click not firing up function in ionic 4

Question

I have a button and a function in my ionic 4 Code. Ideally on the click of the button, the function should fire up but that's not happening.

MY HTML

<ion-content padding>
<div class="contentFlow" id="profile-content">
    <h1>Profile</h1>
    <ion-button (click)="clicked()"  expand="block" color="light">
      Logout
    </ion-button>
  </div>
</ion-content>

MY TS:

clicked() {
    alert('hello');
  }

Note: I need to keep the div in my code.

What should I do?

Can you reproduce this code on Stackblitz ? I don't see why it wouldn't work.. https://stackblitz.com/fork/ionic — Zooly, Jan 28 '19 at 14:45
@Zooly I recreated it in Stackblitz. But I guess it still does not support ionic 4 and produces an error. Check it: https://stackblitz.com/edit/ionic-m9k2fg — Kumar Priyansh, Jan 28 '19 at 14:50
What if you use other thing than `alert` to test your function ? I'm not sure alert work in a mobile webview — Zooly, Jan 28 '19 at 14:56
I used console log and ionic's native Alert too. Doesn't work — Kumar Priyansh, Jan 28 '19 at 15:04
In old documentations, I can find : ``. Does it change something for you ? — Zooly, Jan 28 '19 at 15:12
So does your button work if placed outside of div? If so plz share what css is there for div’s class “contentFlow” — Sergey Rudenko, Jan 28 '19 at 15:47
The issue is with your css. try giving `z-index: 1` to your button styles — Sudarshana Dayananda, Jan 28 '19 at 16:13
@SudarshanaDayananda `z-index: 1` does not work. Also, placing the button outside of the div does nothing, although my main goal was to keep the button inside the Div. — Kumar Priyansh, Jan 29 '19 at 04:21
I got it. Apparently everything is disabled because I am using the tabs `ion-tabs` Layout. But I don't know why one component would interfere with another. Maybe a bug of ionic 4. I fixed it by getting rid of the `ion-tabs` line and just starting it with `` — Kumar Priyansh, Jan 29 '19 at 04:56
What a strange and unfortunate error ( the fact that simple click events don't work within ion-tabs ) . @KumarPriyansh , you should get an award for discovering that. I've been toying with this for an hour trying to figure out what simple click events don't work in Ionic. ( I too, am using tabs ) . You would think that would be a major bug that would be discovered sooner than now. Are there that few people using Ionic that the answer to this would be buried in a comment under a stack overflow post ? I mean your solution should be front and center and the accepted answer. — Nmuta, May 25 '19 at 04:05
I had this for Android only - (just for one button). My dirty fix seemed to be setting the button z-index to a large number (I could not see anything on top). — peterc, Mar 24 '22 at 00:18

score 5 · Answer 1 · answered Apr 07 '20 at 02:07

5

I have seen such things when the rendering of elements is overlapping.

You should check. There maybe an invisible layer on top of the whole element. So you can see it but you cannot interact with it. Making us feel that the simple button press is not working.

Cheers

answered Apr 07 '20 at 02:07

Leo Getz

69
1
2

Thanks! This was the issue for me. My ion-tabs were covering the entire page making the buttons unresponsive – Robin van den Hurk Jun 08 '20 at 20:50

score 2 · Answer 2 · answered Apr 25 '19 at 20:30

It working for me like this

html

      <div text-center>
        <ion-button (click)='bcWeek()' fill='clear' size='small' >
          <ion-icon name='arrow-dropleft' ></ion-icon>
        </ion-button>
        Some text
        <ion-button (click)='fwWeek()' fill='clear' size='small' >
          <ion-icon name='arrow-dropright' ></ion-icon>
        </ion-button>
      </div>

ts

  bcWeek() {
    console.log('back');

  }

  fwWeek() {
    console.log('fw');

  }

@Kumar Priyansh

if you comment

<div class="contentFlow" id="profile-content">

is working?

score 0 · Answer 3 · answered May 06 '21 at 19:22

it did not not work:

<ion-button [hidden]="showStock" (click)="setNewStock()" color="warning" class="ion-color ion-color-warning ios button button-solid ion-activatable ion-focusable hydrated">OK</ion-button>

this is worked: (set func to end of ion-button)

<ion-button [hidden]="showStock" color="warning" class="ion-color ion-color-warning ios button button-solid ion-activatable ion-focusable hydrated" (click)="setNewStock()">OK</ion-button>

it's strange behavior but in my case it worked

ion-button Click not firing up function in ionic 4

3 Answers3

Linked