Finding the Name of the Active Tab in Ionic 3 app.module

My app features a side menu with tabs, following a structure similar to .

The root of my app is Menu.ts, where I load the Tabs Pages.

In the constructor of app.component, I am trying to get the current active tab using various methods like:

this.nav.getActive().component
this.nav.getActive().component.tabRef.getSelected().root

like this
    this.app.viewDidEnter.subscribe((evt) => {
this.nav.getActive().component

    });

However, none of these methods are working as expected. They always return TabsPage instead of the actual name of the active page.

This is how the Tabs Page is structured:

export class TabsPage {

  tab1Root: any = 'HomePage';
  tab2Root: any = 'ProductsPage';
  tab3Root: any = 'DynamicProductsPage';
  myIndex: number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.myIndex = navParams.data.tabIndex || 0;
  }

}

And here is the template for the Tabs:

<ion-tabs  #myTabs [selectedIndex]="myIndex" [color]="'primary'">
  <ion-tab [root]="tab1Root"  tabTitle="Home" tabIcon="ios-home" show=true  md="md-home"></ion-tab>
  <ion-tab [root]="tab2Root"  tabTitle="Products" tabIcon="ios-laptop" show=true md="md-laptop"></ion-tab>
</ion-tabs>
angulartypescriptionic2ionic3

Answer №1

Check out the example below for a solution.

class TabsPage {

@ViewChild('myTabs') tabRef: Tabs;

ionViewDidEnter() {
  let selectedTab:Tab = this.tabRef.getSelected();//Get the currently selected tab
 }

}

To learn more, visit this resource.

If you want to transfer this information to app.component.ts, consider using Events. With Events, you can send the details (such as selectedTab) to the app.component.ts.

Answer №2

file/tab.ts

import { NavController, NavParams } from 'ionic-angular';
import { PageA } from '../pageA/pageA';
import { PageB } from '../pageB/pageB';
import { GlobalVarService } from "../../services/globalvar/globalvar";

export class TabScreen{

    tab1Root = PageA;
    tab2Root = PageB;

    parameter1="listA";
    parameter2="listB";

    constructor(private navParams: NavParams,private GlobalVarService: GlobalVarService){
        this.GlobalVarService.setCurrentTab(navParams.get('index'));
    }

}

file/tab.html

<ion-tabs color="primary" selectedIndex= {{selected}} >
    <ion-tab [root]="PageA" [rootParams]="parameter1" tabTitle="PageA" tabIcon="icon-A" ></ion-tab>
    <ion-tab [root]="PageB" [rootParams]="parameter2" tabTitle="PageB" tabIcon="icon-B" ></ion-tab>
</ion-tabs>

services/globalvar.ts

export class GlobalVarService {
    private active_tab:any;

    constructor(){
        this.active_tab=null;
    }

    setCurrentTab(value){
        this.active_tab=value;
    }
    getCurrentTab(){
        return this.active_tab;
    }
}

app.module.ts

import { GlobalVarService } from "../services/globalvar/globalvar";
export class MyApp {

    constructor(private GlobalVarService: GlobalVarService){

    }
     initializeApp() {
        this.platform.ready().then((source) => {

        console.log(this.GlobalVarService.getCurrentTab());

        }
    }
}

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

Set the mat-option as active by marking it with a check symbol

Currently, I am utilizing mat-autocomplete. Whenever a selection is made manually from the dropdown options, the chosen item is displayed with a distinct background color and has a checkmark on the right side. However, when an option in the dropdown is se ...

angulartypescriptangular-materialmat-autocompletemat-option

I am experiencing difficulties with integrating the Stripe checkout API into my MEAN stack development

view error image here I encountered this issue in the developer tools. check terminal error image here This is the error shown in the backend terminal. explore Stripe documentation for guidance Here are the helpful Stripe docs that guided me through. ...

node.jsangularexpressstripe-paymentsmean-stack

What is the design for headers in accordion-groups with ngx-bootstrap?

Is there a way to customize the style of ngx-bootstrap accordion headers? I've attempted various methods, including copying and pasting code from the documentation for header customization. However, it hasn't been successful. When inspecting the ...

cssangulartypescriptbootstrap-4ngx-bootstrap

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

Issue with updating pages in Ionic/Angular applications

Using Ionic 5 and Angular, my page is bound to an object (Person). When I select data from WebSQL, my object gets updated but the page does not reflect this change until I interact with another control or menu. // This code is in my component inside a c ...

angularionic-frameworkweb-sql

Integration of HostConfig with AdaptiveCards

Is there anyone familiar with incorporating a HostConfig to style AdaptiveCards using the webchat CDN in an Asp.Net Core environment? For instance, what should be the name of the file? And where exactly does it need to be placed? The specific setup for ...

angularasp.net-corebotframeworkweb-chat

Executing various angular 4 applications simultaneously using a shared Node.js server for rendering purposes

What is the best way to configure index files for both front-end (Angular 4 CLI) and backend (Angular 4 CLI) in order to manage two separate Angular apps? ...

angularexpress

Issue with Angular and rxjs: Subscription provider not found

Trying to establish communication between a service and component in Angular, where the service holds a value and the component subscribes to its changes. Currently utilizing rxjs Subscription, but encountering an issue: Uncaught (in promise): Error: No p ...

angulartypescriptrxjs

Is it possible to use the HostListener in Angular 7 to detect any scroll event occurring on a specific element within a webpage?

I am developing a breadcrumb bar component in Angular 7 that should dynamically hide and show based on user scrolling behavior. To achieve this, I created a directive to track the scroll position of the container element. While my code for capturing the s ...

angulartypescriptuser-interfacescrollangular7

What is the best way to execute a GraphQL mutation query with a variable object?

My Register Mutation GraphQL Query is causing an error when executed. The error message states: "Variable "$options" of type "UsernamePasswordInput" used in position expecting type "UsernamePasswordInput!". How can I properly run my GraphQL query for mutat ...

typescriptgraphqlapollo

Tips for using distinct style and script tags for various templates in angular

I am using a Bootstrap template that comes with different styles and scripts for right-to-left (RTL) and left-to-right (LTR) versions. I have successfully added the theme to my index.html file, and it works perfectly when choosing between the LTR or RTL ve ...

angulartemplates

Embarking on the Angular journey

As a beginner in Angular, I am facing difficulties in achieving my desired outcome. Let me start by presenting my input: {"components" : [ {"cardType" : "type1", "direction":"0", "formats":"jpeg;png;gif"}, {"cardType" : "type1", "direction":"1", " ...

angularfiltersql-order-by

Discovering the power of Angular 2 with ngrx while putting my Reducer to the

Within my Reducer file: case PumpActionTypes.EnterLocalMode: return commandOne.upsertOne( {id: action.payload.id, changes: { local: false }}, state ); When testing, I aim to verify that the local property is indeed modified to false. My curr ...

angulartypescriptjasminerxjsngrx

Differentiating AWS API errors in TypeScript: A guide

How can I write different handlers in TypeScript for ThrottlingException and ExecutionLimitExceeded when starting a StepFunction execution? new StepFunction.startExecution({}, (err, data) => { if (err) { // Need to identify ThrottlingExcepti ...

typescriptamazon-web-servicesaws-step-functions

How can I integrate a timer into an Angular carousel feature?

I have put together a carousel based on a tutorial I found on a website. Check out the HTML code for my carousel below: <div class="row carousel" (mouseover)="mouseCheck()"> <!-- For the prev control button ...

htmlcssangulartypescriptcarousel

What is the best way to maintain the correct 'this' context for a function that is outside of the Vue

I'm struggling with my Vue component and encountering some errors. <script lang="ts"> import Vue from 'vue'; import { ElForm } from 'element-ui/types/form'; type Validator = ( this: typeof PasswordReset, rule: any, va ...

typescriptvue.js

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on

I am experiencing an unusual issue with autofill in Chrome. After logging in and then logging out of the app, the input fields (email, password) are auto-filled but appear to be frozen and unclickable. This problem does not occur every time; it only happe ...

javascripthtmlangulargoogle-chromefrontend

Error: The method map is not a valid function for the HTTP GET operation

In my Angular 4 project, I'm attempting to retrieve data from an API. Following the instructions in this article which outlines the process, but I encountered an error: TypeError: this.http.get(...).map is not a function This is the code snippet I ...

javascriptangulartypescript

The type definition file for '@types' is not present in Ionic's code base

After updating my Ionic 6 project to use Angular 3, everything works perfectly in debug mode. However, when I attempt to compile for production using 'ionic build --prod' or 'ionic cordova build android --prod', I encounter the followin ...

typescriptionic-framework

What is the best way to incorporate master/detail components without relying on hierarchical routes?

I need to combine the following elements. An index page with the route /items (plural). This page should be scrollable. When clicking on individual items, I want to display a detail page with the route /item/:id (singular). The detail page should have a ...

angularroutes