"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

The combination of arrays and array methods in intersection types may encounter difficulty in accessing all fields

I have two different types, both in the form of arrays of objects with specified fields, combined into an intersection type in Typescript. When I access an element from the array, I can retrieve the second field without any issues. However, when I try to ...

arraystypescriptunion-types

What is the best way to ensure that a global variable is populated after subscribing to an asynchronous event?

Recently, I encountered an async firebase call that looks something like this: this.fbProvider.fbGetProfile() .subscribe(p => { this.profile = p; ...

angularfirebaseasynchronousangularfire

Uploading an Image to a SharePoint Group Folder using an Angular Application

I have a project in which I am developing an app using Angular to upload images to a SharePoint site. Specifically, I want to upload images from the Angular app to a private folder within a SharePoint group. I am utilizing Microsoft Graph API and Azure AD ...

angularsharepointmicrosoft-graph-apipostman

How to exclude specific {} from TypeScript union without affecting other types

Consider the following union type: type T = {} | ({ some: number } & { any: string }) If you want to narrow this type to the latter, simply excluding the empty object won't work: type WithEntries = Exclude<T, {}> This will result in neve ...

typescript

Creating a form with multiple components in Angular 6: A step-by-step guide

I'm currently working on building a Reactive Form that spans across multiple components. Here's an example of what I have: <form [formGroup]="myForm" (ngSubmit)="onSubmitted()"> <app-names></app-names> <app-address> ...

angulartypescriptangular6angular-reactive-formsangular-forms

Issue with generating source map files using Webpack 4 and ts-loader

What mistake am I making here? When I execute webpack -d --config webpack.config.js, the map file is not generated along with bundle files. Here is my webpack.config.js: const path = require('path'); module.exports = { mode: "development" ...

typescriptwebpackts-loader

Error in Ionic2 TypeScript: 'google' and '$' names not found, despite Google Maps and jQuery functioning correctly

I am currently working on developing an ionic2 application using TypeScript. Within the index.html file, I have attempted to integrate jquery and the Google Maps JS API before cordova.js: <!-- Vendor --> <script src="https://maps.googleapis. ...

typescriptionic-frameworkangular

"Unlock the secret to effortlessly redirecting users to a designated page when they click the browser's back

So I'm facing the challenge of disabling the browser back button on multiple routes and sending requests to the backend is resulting in inconsistent behavior. I don't want to create a multitude of similar API requests each time. Currently, I have ...

javascriptangularroutes

Having trouble launching the node pm2 process manager on AWS Elastic Beanstalk, npm update verification did not pass

Having some issues with utilizing pm2 for managing processes in my typescript node application, deployed on elasticbeanstalk. Whenever a new instance is launched by pm2, the following shows up in the logs ---------------------node.js logs---------------- ...

node.jstypescriptamazon-web-servicesamazon-elastic-beanstalkpm2

Exploring the power of TypeScript strictNullChecks with array manipulation

My understanding of Typescript's behavior with the compiler option strictNullChecks enabled is not yet complete. It appears that in some cases, Typescript (version 2.4.1) recognizes an item in a string[] as a string, while other times it does not: in ...

typescriptdefinitelytyped

Utilizing Angular's reactive forms to populate an array field with an array of data

I am currently using Angular 6 along with Reactive form to create a form. Within the ngOnInit() function, I have set up a form group in the following manner: this.landingPageForm = this.formBuilder.group({ title: new FormControl('', [ Val ...

angularangular6angular-reactive-forms

Tips for troubleshooting an error in ionic when compiling a template

Hello, I'm currently working on my first app but encountered an error during the extraction process. ? Starter template: my-first-app √ Preparing directory .\testarashelia - done! > git.exe clone https://github.com/ionic-team/photo-gallery- ...

node.jsangularionic-frameworknpm

I'm looking to find the Angular version of "event.target.value" - can you help me out?

https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/pages/home/home.component.html I am currently working on getting the dropdown menu to function properly for filtering the flags displayed below it. My initial thought was to replicate the search ...

javascriptangulartypescriptrxjsobservable

Furnish an item for a particular service

I am currently attempting to utilize a service created by another individual (github). This particular service requires a configuration to be passed to it. As stated in the repository: To configure Neo4jSettings in your bootstrap: provide('Neo4jSet ...

angulartypescriptangular2-servicesangular2-providers

Issue with running tests on Angular Material components causing errors

Running ng test on my Angular 8 project with Angular material components is resulting in multiple failures. The issue seems to be related to missing test cases for these scenarios. DeleteBotModalComponent > should create Failed: Template parse errors: & ...

angularunit-testingangular-materialkarma-jasmine

Tabs justified are not constrained by width

Utilizing Bootstrap 3, I aim to have the Tabs align perfectly with the full content. The use of nav-tabs can be observed in the code below. It may seem a bit unusual due to my implementation of Angular 4 and the code being copied from Dev Tools. <ul cl ...

twitter-bootstrapangulartwitter-bootstrap-3tabs

Discovering all images in Angular

I have a function that stores image data, including the name. Using *ngFor, I am able to fetch this data from the database and display it in boxes. HTML <div class="row tab-pane Galeria"> <div *ngFor="let product of products" (click)="Im ...

angulartypescript

"Encountered a runtime error while trying to execute the doubleClick() function using Pro

Encountering the following issue: "WebDriverError: Unable to convert: Error 404: Not found" while running a test with protractor: browser.actions().doubleClick(elem).perform(); or browser.actions().click(elem).click(elem).perform(); Uncertain of t ...

typescriptprotractor

Storing an array of objects in local storage is not working in Angular 9

I've encountered an issue trying to save an array of JSON objects into local storage, and I'm puzzled as to why it's not functioning correctly. Despite utilizing localStorage.setItem('comparisons', JSON.stringify(setComparisons)), ...

jsonangulartypescriptlocal-storageangular9

billboard.js: The 'axis.x.type' property is conflicting with different data types in this context

axis: { x: { type: "category" } }, An issue has arisen: The different types of 'axis.x.type' are not compatible with each other. The value of 'string' cannot be assigned to '"category" | &qu ...

javascripttypescriptbillboard.jses6-modules