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://i.sstatic.net/YMubO.jpg

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']);
  }
}

Answer 1

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