ion-item clickable properties not working (Ionic 4)

Question

BACKGROUND: I have a dashboard for my app with 3 ion-items, I want them to be clickable so as someone clicks/taps on the item it will navigate to a different page.

Here is a screenshot to give a better understanding: https://imgur.com/TCv3pMc

Here is a link to my github repo with all the files: https://github.com/jamesslater/boutiquesolicitors

PROBLEM: To do this I've been trying to call a method which routes to the correct page. However, while testing with a console.log I have noticed both (click) and href do not work at all.

Can someone please explain how I can get this working? Any help is greatly appreciated!

RELEVANT CODE:

dashboard.page.html

<div class="nav-wrapper" style="background: white;">
<ion-header class="navbar">

    <ion-buttons slot="end">
      <ion-button (click)="logout()">
        <ion-icon slot="icon-only" color="white" name="log-out"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-img src="assets/logo.png"></ion-img>


</ion-header>
 </div>
<ion-content padding text-center>
  <div class="profile">
  <ion-avatar>
<img src="assets/user.png">
</ion-avatar>
<h1>Hello Richard,</h1>
<ion-label>How can we help you today?</ion-label>
  </div>


    <ion-item (click)="search()">
      <ion-icon name="search" slot="start"></ion-icon>
      <ion-label>Search for a service</ion-label>    
    </ion-item>
    <ion-item>
    <ion-icon name="paper" slot="start"></ion-icon>
    <ion-label>View our latest news</ion-label>
  </ion-item>
  <ion-item>
  <ion-icon name="card" slot="start"></ion-icon>
  <ion-label>Pay a bill</ion-label>
</ion-item>


  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="about">
       <ion-icon name="information-circle-outline"></ion-icon>
        <ion-label>About Us</ion-label>
      </ion-tab-button>
      <ion-tab-button href="members/dashboard">

        <ion-icon color="blue" name="home"></ion-icon>
        <ion-label>Dashboard</ion-label>
      </ion-tab-button>
      <ion-tab-button tab="contact">
        <ion-icon name="contacts"></ion-icon>
        <ion-label>Contact Us</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

dashboard.page.ts

import { AuthenticationService } from './../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {
error = this.error; 
  constructor(private authService: AuthenticationService, private router: Router) { }

  ngOnInit() {
  }

  logout() {
    this.router.navigate(['login']);
    // this.authService.logout();
  }

  search() {
    console.log('clicked');
    this.router.navigate(['members/services']);
  }
}

Hi ,maybe i have a solution , but i'm not sure. try to set the ion-item z-index to 100 — Riccardo Albero
I have done a test on your project, i didn't change nothing, only add (click) event like you , and for me works. this is weird :/ . — Riccardo Albero
Hmm that is pretty weird. Does not work on Chrome dev tools or the Ionic DevApp for me. — James Slater
that's working fine. You are looking something else might be. <ion-item (click)="searchForService()"> <ion-icon name="search" slot="start"></ion-icon> <ion-label>Search for a service</ion-label> </ion-item> — Paresh Gami

Adam Adam · Accepted Answer · 2019-05-07T13:49:11

As you have stated, ion items and ion tabs do not work in unison for some unknown reason. Wouldn't be known to the usual developer as this is a strange use case (which nobody else has picked up on above). Good thing I saw this question, otherwise you'd NEVER get this sorted mate. Surprised you even managed to consider this as one of the factors, well done for that one, really helps with the resolution for this:

Best way to go about doing this: Use a transparent ion-button inside of an ion item.

HTML/IONIC Code For Button:

    <div class="items">
   <ion-item detail> 
     <ion-button fill="clear" class="itemBtns" (click)="search()">Search for a service</ion-button>
     <ion-icon name="search" slot="start"></ion-icon> 
     <!-- <ion-label>Search for a service</ion-label>  -->
    </ion-item>

This creates a 'click zone' which is the way of bypassing the issue of not being able to use ion items and ion tabs at the same time.

CSS for button:

.itemBtns {
color: black;
font-size: 100%;
padding-right: 100%;  }

With a combination of the 'fill' property on the button in the HTML code, this makes the button invisible and should act as a hyperlink that spans the whole section of the ion item.

Please mark this as the correct answer if I have helped you. If not, let me know and I will offer further assistance. :)

ion-item clickable properties not working (Ionic 4)

2 Answers