Click and tab event not working in ion-tab


#1

I want to navigate back to root page Dashboard on clicking or tapping Dashboard tab. But it never triggers.

html file

<ion-tabs>

<ion-tab [root]="mobilesListRoot" tabTitle="Mobiles list" tabIcon="phone-portrait"></ion-tab>

<ion-tab [root]="salesRoot" tabTitle="Sales" tabIcon="cash"></ion-tab>

<ion-tab [root]="purchasesRoot" tabTitle="Purchases" tabIcon="cart"></ion-tab>

<ion-tab (click)="navigateTo()" tabTitle="Dashboard" tabIcon="home"></ion-tab>

</ion-tabs>

ts file

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { MobilesListPage } from '../mobiles-list/mobiles-list';
import { SalesPage } from '../sales/sales';
import { PurchasesPage } from '../purchases/purchases';
import { DashboardPage } from '../dashboard/dashboard';

@IonicPage()
@Component({
  selector: 'page-mobiles-history',
  templateUrl: 'mobiles-history.html'
})
export class MobilesHistoryPage {

  mobilesListRoot = MobilesListPage;
  salesRoot = SalesPage;
  purchasesRoot = PurchasesPage;

  constructor(public navCtrl: NavController) {}

  navigateTo()
  {
    console.log('pop to dashboard');
    
    this.navCtrl.push(DashboardPage);
  }
}

I’m using Ionic: 4.2.1