Cant hide Ionic Tab first

Question

I'm trying to create Ionic-3 Tab option, it's working fine, but my issue is I don't want to display 1st tab in tab menu,but I want to display 1st tab menu in page details in 1st time page opening ,I'm try to hide this 1st tab , but its not working for me, anyone knows how to do that?I have attached some images on my issue to help you understand it.

Tabs.html

<ion-tabs>
  <ion-tab [root]="tab0Root"></ion-tab>
  <ion-tab [root]="tab1Root" tabTitle="Check-In" tabIcon="people"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Observations" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Activities" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Health" tabIcon="medkit"></ion-tab>
</ion-tabs>

Tabs.ts

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import {HealthPage} from '../health/health';
import {MainPage} from '../main/main';


@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab0Root = MainPage;
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;
  tab4Root = HealthPage;
  constructor() {

  }
}

Just hide it by css in `tabs.scss` and show it again in which page you want — Duannx, Jan 03 '18 at 02:18
Is [that](https://stackblitz.com/edit/ionic-8jmimp) what you want? Tab `Home` show in `HomePage` and `MenuPage` but hide in `ContactPage` — Duannx, Jan 03 '18 at 06:10
I want to hide `tab0Root` button and but I want to display `tab0Root` details in app opening — core114, Jan 03 '18 at 06:22
@Duannx sir, Yeah, My tab part is working fine, my issue is I mentioned above , look at image — core114, Jan 03 '18 at 08:15
https://stackblitz.com/edit/ionic-8jmimp Is that what you want? — Duannx, Jan 03 '18 at 10:10
@Duannx omg That is my issue, sir can you put it I Can accept,Thanks lot — core114, Jan 03 '18 at 10:11

score 1 · Accepted Answer · answered Jan 03 '18 at 10:17

1

Every Tab has it own show property. So just change it to false if you want to hide it.
In tabs.ts:

import { Component, ViewChild } from '@angular/core';
import { Tabs } from 'ionic-angular';
@ViewChild(Tabs) tabs: Tabs;
ionViewDidEnter(){ 
    this.tabs.getByIndex(0).show = false; 
}

answered Jan 03 '18 at 10:17

Duannx

7,501
1
26
59

1

Sir Thanks for the solution and your time – core114 Jan 03 '18 at 10:23
Sir I had some error why getting this :( ` TypeError: _co.tabChange is not a function` – core114 Jan 03 '18 at 10:41
1

sorry sir Its my mistake I removed this `(ionChange)="tabChange($event)"` now its work – core114 Jan 03 '18 at 10:45

score 0 · Answer 2 · answered Jan 02 '18 at 06:13

0

code side:

tab0Root = MainPage;
public isVisibleFirstTab : boolean = false;

mark-up:

<ion-tab *ngIf="isVisibleFirstTab" [root]="tab0Root"></ion-tab>

or [rootParams] could be used for *ngIf condition

answered Jan 02 '18 at 06:13

Berk Akkerman

483
1
3
12

Sir Now Im try it, not work, 1st Tab menu is hide but not display in that tab menu details is page opening, – core114 Jan 02 '18 at 06:27
this is my code `export class TabsPage { tab0Root = MainPage; tab1Root = HomePage; tab2Root = AboutPage; tab3Root = ContactPage; tab4Root = HealthPage; public isVisibleFirstTab : boolean = false; constructor() { }` – core114 Jan 02 '18 at 06:28
and ` ` – core114 Jan 02 '18 at 06:29

Cant hide Ionic Tab first

2 Answers2