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?

Solution 1

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

Solution 2

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?

Comments

[Zooly]

Can you reproduce this code on Stackblitz ? I don't see why it wouldn't work.. stackblitz.com/fork/ionic

[Kumar Priyansh]

@Zooly I recreated it in Stackblitz. But I guess it still does not support ionic 4 and produces an error. Check it: stackblitz.com/edit/ionic-m9k2fg

[Zooly]

Indeed, Stackblitz seems to be broken for Ionic..

[Zooly]

What if you use other thing than alert to test your function ? I'm not sure alert work in a mobile webview

[Kumar Priyansh]

I used console log and ionic's native Alert too. Doesn't work

[Zooly]

In old documentations, I can find : <button ion-button (click)="clicked()>Click</button>. Does it change something for you ?

[Kumar Priyansh]

No . It does not work

[Sergey Rudenko]

So does your button work if placed outside of div? If so plz share what css is there for div’s class “contentFlow”

[Sudarshana Dayananda]

The issue is with your css. try giving z-index: 1 to your button styles

[Kumar Priyansh]

@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.

[Sudarshana Dayananda]

test ionFocus event is working on your ion-button ?

[Kumar Priyansh]

No ionFocus is also not working

[Kumar Priyansh]

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 <ion-tab-bar>

[Nmuta]

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.

[peterc]

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).

[Robin van den Hurk]

Thanks! This was the issue for me. My ion-tabs were covering the entire page making the buttons unresponsive