Click on ion-buttons/ion-icon doesn't work

0
votes

I'm using Ionic 3 and one of my function in my Component is not fired on the view. I don't understand because my function myGoBack() works when I run it by clicking on other element, but not on one I wanna use (on the ion-icon or ion-buttons). For example I made a test button, and it's fired on it !

Please help me

html :

<ion-toolbar icon-start>
  <ion-buttons start icon-only (click)="myGoBack()">
       <ion-icon (click)="myGoBack()" name='arrow-back' icon-start></ion-icon>
  </ion-buttons>
   <button (click)="myGoBack()">Test</button>
  <ion-searchbar placeholder='Rechercher' (ionInput)="getItems($event,typeAffiche)"></ion-searchbar>
</ion-toolbar>
2
htmlangularionic-frameworkionic3
Hi Nico, can you share more context as to what are you trying to achieve? it feels like if you want to build user experience where navbar has search bar and also features back button - it is fairly easy to achieve, but I am not sure where the toolbar you are building is intended to "live"? - Sergey Rudenko
A similar post has a comment suggesting increasing the icon's z-index. If that doesn't work, try wrapping the icon in a button like suggested on this post. - Joseph Webber
By wrapping in a button element it's working, Thank you @JosephWebber :) - Nico Baudon

2 Answers

0
votes
<button ion-button icon-only clear item-right (click)="myGoBack()">
<ion-icon name='arrow-back' icon-start></ion-icon></button>
0
votes

Try this out.

<ion-header>
  <ion-navbar color="habits">
      <button ion-button icon-only   (click)="chatMenu()" class="chat-menu-btn">
        <ion-icon name="md-more" ></ion-icon>
      </button>
  </ion-navbar>
</ion-header>