Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

I am working on a project using Ionic 2 and I have implemented multiple tabs in the application. However, I need to find a way to hide the top tab when the user clicks on the bottom tabs menu icon.

My goal is to make the above tab disappear when the user clicks on the bottom tab menu apps icon. In AngularJS, I could achieve this by using ng-hide, but I am unsure how to do it in Ionic 2.

Upon clicking the tab menu apps icon:

<ion-tabs tabs-only>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

The above tab should be hidden

<ion-tabs tabs-only2 tabbar>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

Details of my multiple tab elements:

<ion-tabs tabs-only>
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 tabbar>
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>
</ion-tabs>

If you have a solution, please update the Plunker.

htmlcssangularionic2

Answer №1

When working with Ionic2 and Angular2, you have the option to utilize the [hidden] binding to hide elements based on a click event. However, it's important to note that ion-tabs serve as containers for tab pages, not just simple menus. Therefore, hiding the tabs will also hide the current tab page.

To see an example, visit this Plunkr demo

<ion-tabs tabs-only (click)="x()" >
    <ion-tab tabIcon="apps" [root]="tab3Root"></ion-tab>
</ion-tabs>

<ion-tabs tabs-only2 tabbar (click)="x()" [hidden]="hideTopTab" >
  <ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Tab 2" tabIcon="pulse"></ion-tab>

</ion-tabs>

Additionally, consider implementing the following code:

  hideTopTab:boolean=false;
  x(){
    this.hideTopTab = true;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the display of multiple divs within a main div

I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...

htmlcssangularangular6position

Next JS Event Listener Failing to Detect Scroll Events

Currently, I am attempting to change the state and display a shadow in the navigation bar when the user scrolls, but for some reason it is not detecting the event. I am working with nextJS 13 and tailwind css. const [shadow, setShadow] = useState(false) ...

javascriptcssnext.jstailwind-css

JQuery submit event not triggering object setting

I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...

javascriptjqueryhtmljsonobject

Center the image within a Grid item using Material UI's alignment feature

I am currently utilizing the Grid component from Material UI. I'm facing an issue where the image inside a Grid item is aligned to the left instead of being centered. <Grid container direction="row" justify="center" alignIte ...

cssreactjsmaterial-ui

Requesting an API token through the body using Javascript's Fetch function

I'm currently working on developing a frontend application using Javascript Fetch to interact with an API service. One of the tasks I need to accomplish is to create a token by using the POST method and sending an apiKey parameter in the Body. Once I ...

javascripthtmlvisual-studioapi

The URL "http://packagist.org/p/provider-3.json" was unable to be retrieved due to a bad request error (HTTP/1.1 400 Bad Request)

Encountering a 400 bad request issue when trying to connect over HTTP, despite the package only being installable via HTTP. Attempting to override in composer.json to force HTTPS as suggested by others for a workaround, but that solution doesn't seem ...

htmlcssangularlaravel-5

Textbox textchange event triggers Javascript function when Checked=True

$('.LblQTY').on('input', function () { var currentRow = $(this).closest('tr'); var rate = parseFloat(currentRow.find('.LblRate').text()); var quantity = parseFloat($(this).val() == '' ? '0& ...

javascriptjqueryhtml

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...

javascripthtmlcssanimationvue.js

The footer navigation in CSS shifts position when it is hovered over

My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed. ...

htmlcssnavigation

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

cssnext.js

Is there a way to determine if silent login is feasible with adaljs-angular4?

I'm currently utilizing the library [email protected] for an Angular 6 project. I am attempting to achieve the following: If a silent login (login without requiring user input) with Office365 is achievable, then perform a silent login (using ...

angulartypescriptazure-active-directoryadal.jsmicrosoft-adal-angular6

The JSON data fails to load upon the initial page load

I am having trouble getting JSON data to display in JavaScript. Currently, the data only shows up after I refresh the page. Below is the code I am using: $(document).ready(function () { $.ajax({ url:"http://192.168.0.105/stratagic-json/pr ...

javascriptjqueryhtmljson

Using Typescript to collapse the Bootstrap navbar through programming

I've managed to make Bootstrap's navbar collapse successfully using the data-toggle and data-target attributes on each li element. If you're interested, here is a SO answer that explains a way to achieve this without modifying every single ...

javascriptangulartwitter-bootstraptypescript

Struggling with CSS Flexbox when it comes to organizing rows and combining Table and Table Cells

I've been struggling to fix a CSS flex problem for hours. My goal is to make sure that the three boxes in each row have the same height. While I'm familiar with using flex, I suspect that floats may be the root of the issue. Even after clearing t ...

cssflexbox

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

htmlcssflexbox

Using jquery to target and manipulate elements with the div selector

I need assistance with adding a selector on my webpage where users can choose one option and retrieve the id of the selected part. This id will then be used in a link. I am new to using jQuery, so I am having trouble implementing this feature. Below is an ...

jquerycssselector

Ways to guarantee consistent font appearance across all browsers/platforms for PDF display (Cufon, Images, sIFR)

After countless hours delving into various @font-face issues for RTL languages, font-rendering disparities on different browsers, PDF compatibility, and more. My main goal is to achieve CSS-compatible Arabic text (an RTL language) in an HTML document that ...

htmlpdf-generationfont-facesifrcufon

Modify the HTML input type color in React.js only after releasing the mouse button

<input className="color-palatte" type="color" onChange={(e) => onColorChange(e)} /> When interacting with the color palette, I have set up an API call to trigger only when I release the slider instead of continuous calls while sliding over the co ...

htmlreactjseventsinputcolors

Could there be a glitch affecting the alignment of the dropdown-menu-end in Bootstrap 5.0?

I can't seem to make dropdown-menu-end from Bootstrap 5.0 work in Angular, even though I copied the exact code from https://www.w3schools.com/bootstrap5/bootstrap_dropdowns.php. The HTML display using my code from VSC looks like this: site appearance ...

htmlbootstrap-5

Prevent manual scrolling with CSS

I've incorporated CSS smooth scrolling into my project, which is activated by clicking a specific div element. My current goal is to prevent manual scrolling on the page so that users can only navigate by clicking the designated div and not by conven ...

htmlcssuser-interfacescrollcss-transitions