"Implementing Ionic 2 tabs allows for retrieving the previously selected option with the

Here is the code I am currently working on:

onTabsChange(abc) {
   let selected_tab = this.tabs.getSelected();
   let tab_index = selected_tab.index;
   console.log(tab_index);  // should print current tab index but it prints previously selected tab index
}

And here is the HTML code:

 <ion-tabs #myTabs class="menu" (ionChange)="onTabsChange()" selectedIndex="0">
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
   <ion-tab [root]="blank" tabTitle="Blank"></ion-tab>
 </ion-tabs>

When clicking on any tab, this.tabs.getSelected() returns the previously selected tab. How can I get the currently selected tab instead?

angulartypescriptionic2ionic3

Answer №1

When a tab is clicked, the this.tabs.getSelected() function returns the currently selected tab rather than the previously selected one.

The getSelected() method will give you the current selected tab based on a zero-based index system. This means that the first tab is indexed at 0, the second at 1, and so on.

<ion-tabs #myTabs (ionChange)="onTabsChange()" selectedIndex="0">
  <ion-tab [root]="tab1Root" tabTitle="TabTitle1"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="tabTitle2"></ion-tab>
</ion-tabs>

In your code:

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;

  tab1Root: any = Page1;
  tab2Root: any = Page2;

  public onTabsChange() {
    let selectedTab = this.tabRef.getSelected();
    console.log(selectedTab.index + ' - ' + selectedTab.tabTitle);
  }
}

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

What sets Angular 2/4 apart is the synchronous nature of Reactive forms, contrasting with the asynchronous behavior of template-driven forms

While looking through the documentation on angular.io, specifically about reactive forms being synchronous (Reactive forms are synchronous), I found myself struggling to grasp the concept of how reactive forms differ from template-driven forms in terms of ...

angularangular-reactive-formsangular4-forms

Filtering out specific properties from an element within a JavaScript forEach loop

const findBloodType = bloodCodeArray.find(bloodCode => bloodCode.code.toUpperCase() === bloodType.toUpperCase()).code; In my Angular code, I am trying to retrieve just the 'code' property of the 'bloodCode' element using a callback ...

javascriptarraysangularforeachcallback

PrimeNG Default DataTable - Customize Column Visibility

My datatable currently has 11 columns, and I am utilizing the toggleable columns feature. However, I want to display only 4 selected columns initially out of the 11 options available. I have researched various possibilities using the MultiSelect component, ...

angularprimengprimeng-datatable

Tips for ensuring your controls function properly and seamlessly when switching to another page

I utilized the instructions from this post to implement a slider. However, I encountered an issue with the controller when navigating to subsequent pages. While the controller functions correctly on the initial page, it duplicates the same values on the fo ...

angulartypescriptpaginationangular5slidetoggle

The error message "Identifier 'title' is not defined. '{}' does not contain such a member angular 8" indicates that the title variable is not recognized or defined in the

Here is the code snippet of my component: import { Router, ActivatedRoute } from '@angular/router'; import { Component, OnInit } from '@angular/core'; import { CategoriesService } from 'src/app/categories.service'; import { P ...

angulartypescriptangular8

Leverage server-side data processing capabilities in NuxtJS

I am currently in the process of creating a session cookie for my user. To do this, I send a request to my backend API with the hope of receiving a token in return. Once I have obtained this token, I need to store it in a cookie to establish the user' ...

typescriptvue.jsnuxt.js

The typescript error TS2339 is triggered by the property 'webkitURL' not being found on the 'Window' type

Currently utilizing Angular 2 in a project that is compiled with TypeScript. Encountering an issue when attempting to generate a blob image: Error TS2339: Property 'webkitURL' does not exist on type 'Window' The TypeScript code causi ...

javascriptgoogle-chrometypescriptangularwebkit

What is the best way to expand all parent nodes of a specific child node in Angular 8 using the nested tree control of the mat tree?

getBookOutlineBar method is designed to take a list of nodes along with the selected node that needs to be highlighted when the outline sidebar opens. However, the current implementation only expands one specific node instead of all parent nodes. For exam ...

angulartreetreeviewmaterial-uimat

What is preventing me from running UNIT Tests in VSCode when I have both 2 windows and 2 different projects open simultaneously?

I have taken on a new project that involves working with existing unit tests. While I recently completed a course on Angular testing, I am still struggling to make the tests run smoothly. To aid in my task, I created a project filled with basic examples f ...

angulartypescriptunit-testingvisual-studio-code

The Next.js React framework seems to be having trouble reading user input from a

I'm encountering an issue when attempting to save form email/password registration using Next.js as it is throwing an error. import {useState} from 'react' type Props = { label: string placeholder?: string onChange: () => void na ...

reactjstypescriptnext.js

What are the steps to testing an endpoint with Jasmine/Karma?

Within one of my components, there is a method that makes a call to an endpoint in the following manner... private async getRolesAsync(): Promise<void> { const roles = await this.http.get<any>('https://sample-endpoint.com').toProm ...

javascriptangularunit-testingjasminekarma-jasmine

Tailored production method based on specific criteria

One of my challenges is to create a versatile factory method using typescript. The main objective is to initialize a class based on its name using generics, instead of employing if/else or switch statements. I am aiming for similar functionality as this ...

typescript

What is the best way to transfer information from a model to the screen?

I need assistance with adding a Todo using a model. When I click the Add todo button located at the bottom of the page, it opens the model. I want to be able to add whatever I type in the input field to the list. How can I send the input field data to the ...

javascriptangularjsangularionic2angular2-routing

What is the best way to execute 2 statements concurrently in Angular 7?

My goal is to add a key rating inside the listing object. However, I am facing an issue where the rating key is not displaying on the console. I suspect that it might be due to the asynchronous nature of the call. Can someone help me identify what mistak ...

javascriptangulartypescriptasynchronoussynchronous

Tips for showcasing an array in nested elements within an Angular mat-tree

I'm new to Angular and I need help displaying an array's values within the child elements of a material tree. Specifically, I want to show the names of fruits (such as Apple, Banana...) in the child elements. The colors and discounts from the ar ...

javascriptjsonangularangular-material

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

What is the best way to send data to a child component in Angular, including components that can be

There are two components in my project: the parent component and the child component, each with their own unique markup. It is crucial for this example that the child component fetches its own data to render and not be provided by the parent. Currently, th ...

htmlangularrendering

Adding a new element to the div by referencing its class name

One way to add a component to the view is by using ViewContainerRef. For instance, HTML File: <div #Ref>it is possible to append the component here</div> TS File: @ViewChild("Ref", { read: ViewContainerRef }) public Ref: ViewContainerRe ...

angularangular-components

Unable to access res.name due to subscription in Angular

Right now, I am following a tutorial on YouTube that covers authentication with Angular. However, I have hit a roadblock: The code provided in the tutorial is not working for me because of the use of subscribe(), which is resulting in the following messag ...

javascriptnode.jsangular

Angular-CLI personalized schematics and collections

I am currently in the process of creating custom schematics for Angular CLI. After some experimentation, I have discovered that the "collection" needs to be compiled because the CLI cannot read TypeScript directly. This means that you can't simply clo ...

angularangular-cliangular-schematics