title: ion-item clickable properties not working (Ionic 4)
body: <p><strong>BACKGROUND:</strong>
  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.</p>
  
  <p>Here is a screenshot to give a better understanding: <a href="https://imgur.com/TCv3pMc" rel="nofollow noreferrer">https://imgur.com/TCv3pMc</a></p>
  
  <p>Here is a link to my github repo with all the files: <a href="https://github.com/jamesslater/boutiquesolicitors" rel="nofollow noreferrer">https://github.com/jamesslater/boutiquesolicitors</a></p>
  
  <p><strong>PROBLEM:</strong>
  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 <strong>do not work at all</strong>.</p>
  
  <p>Can someone please explain how I can get this working? Any help is greatly appreciated!</p>
  
  <p><strong>RELEVANT CODE:</strong></p>
  
  <p><em>dashboard.page.html</em></p>
  
  <pre><code>&lt;div class="nav-wrapper" style="background: white;"&gt;
  &lt;ion-header class="navbar"&gt;
  
      &lt;ion-buttons slot="end"&gt;
        &lt;ion-button (click)="logout()"&gt;
          &lt;ion-icon slot="icon-only" color="white" name="log-out"&gt;&lt;/ion-icon&gt;
        &lt;/ion-button&gt;
      &lt;/ion-buttons&gt;
      &lt;ion-img src="assets/logo.png"&gt;&lt;/ion-img&gt;
  
  
  &lt;/ion-header&gt;
   &lt;/div&gt;
  &lt;ion-content padding text-center&gt;
    &lt;div class="profile"&gt;
    &lt;ion-avatar&gt;
  &lt;img src="assets/user.png"&gt;
  &lt;/ion-avatar&gt;
  &lt;h1&gt;Hello Richard,&lt;/h1&gt;
  &lt;ion-label&gt;How can we help you today?&lt;/ion-label&gt;
    &lt;/div&gt;
  
  
      &lt;ion-item (click)="search()"&gt;
        &lt;ion-icon name="search" slot="start"&gt;&lt;/ion-icon&gt;
        &lt;ion-label&gt;Search for a service&lt;/ion-label&gt;    
      &lt;/ion-item&gt;
      &lt;ion-item&gt;
      &lt;ion-icon name="paper" slot="start"&gt;&lt;/ion-icon&gt;
      &lt;ion-label&gt;View our latest news&lt;/ion-label&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
    &lt;ion-icon name="card" slot="start"&gt;&lt;/ion-icon&gt;
    &lt;ion-label&gt;Pay a bill&lt;/ion-label&gt;
  &lt;/ion-item&gt;
  
  
    &lt;ion-tabs&gt;
      &lt;ion-tab-bar slot="bottom"&gt;
        &lt;ion-tab-button tab="about"&gt;
         &lt;ion-icon name="information-circle-outline"&gt;&lt;/ion-icon&gt;
          &lt;ion-label&gt;About Us&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
        &lt;ion-tab-button href="members/dashboard"&gt;
  
          &lt;ion-icon color="blue" name="home"&gt;&lt;/ion-icon&gt;
          &lt;ion-label&gt;Dashboard&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
        &lt;ion-tab-button tab="contact"&gt;
          &lt;ion-icon name="contacts"&gt;&lt;/ion-icon&gt;
          &lt;ion-label&gt;Contact Us&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
      &lt;/ion-tab-bar&gt;
    &lt;/ion-tabs&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><em>dashboard.page.ts</em></p>
  
  <pre><code>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']);
    }
  }
  </code></pre>