Ionic tab button shoud hide on some onlick() function

i want to hide my ion-tab-bar when a div is loaded using *ngif directive.
but do not know how to do this.
my tab code is

 <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="explore">
      <ion-icon  src="../../assets/no upcoming ride/icon-explore@3x.svg"></ion-icon>
        <ion-label>Explore</ion-label>
      </ion-tab-button>
      <span class="border-left"></span>
      <ion-tab-button tab="suggested" class="tab-btn2">
        <ion-icon src="../../assets/no upcoming ride/icon-suggested@3x.svg"></ion-icon>
        <ion-badge>1</ion-badge>
        <ion-label>Suggested</ion-label>
      </ion-tab-button>
      <span class="border-right"></span>
      <ion-tab-button tab="upcoming">
        <ion-icon src="../../assets/no upcoming ride/icon-upcoming@3x.svg"></ion-icon>
        <ion-label>Upcoming</ion-label>
        <ion-badge>2</ion-badge>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

my explore-page-ts is like this

export class ExplorePage implements OnInit {
  public explore:any;
  public currentRide:any;
  public pickUp:any;
  public dropOff:any;
  public paymentDone:any;

  constructor(){
    this.explore = true;
    this.currentRide = false;
    this.pickUp = false;
    this.dropOff = false;
    this.paymentDone = false;
  }
  ngOnInit() {
  }

  accept(){
    this.explore = false;
    this.currentRide = true;
  }
  onWay(){
    this.currentRide = false;
    this.pickUp = true;
  }
  startTrip(){
    this.pickUp = false;
    this.dropOff = true;
  }
  endTrip(){
    this.dropOff = false;
    this.paymentDone = true;
  }
  done(){
    this.paymentDone = false;
    this.explore = true;
  }
}

and my explore page html is like

<ion-content>
<div *ngif="next">
//my div content
<ion-button (click)="btn-press()">
</div>

and in the child page-> Explore
i have different divs which i hide and show depending on the logic.
what i want is when the app load all tabs shold be show at bottom and they are currently showing but when explore tab is selected and its content is displayed in which there is a button on which some onclick() function is pressed then the ion-tab-bar should hide.
on this btn-press function tab-bar should hide.
sorry for my english.
thanks,

1 post - 1 participant

Read full topic