Push page and select another tab

Ionic Framework ionic-v3
1

Hi,

I have two tabs and following nav structure:

  1. Tab1: News (List of articles)
    1.1. Single article view
  2. Tab2: About page (simple page with button)

When Tab2 is active, I would like to tap on ‘Go to article’ button and open article view (it works) but I would like to highlight Tab1 also. Moreover when single article view is opened I would like to back to list of articles (not to about page).

How can I do that?

Thanks in advance

tabs.ts

import { Component } from '@angular/core';
import { NewsView } from '../news/news';
import { AboutView } from '../about/about';

@Component({
 templateUrl: 'tabs.html'
})

export class TabsPage {
  tab1: any = NewsView;
  tab2: any = AboutView;

  constructor() {}
}

news.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, Nav } from 'ionic-angular';
import { ArticleView } from '../article/article';

@Component({
  selector: 'news',
  templateUrl: 'news.html'
})

export class ArticlesView {
  constructor(public navCtrl: NavController) {
  }

goTo() {
  this.navCtrl.push(ArticleView);
}

news.html

<ion-header>
    <ion-navbar>
        <ion-title>News</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <button (click)="goTo()" ion-button full>Go to single view</button>
</ion-content>

article.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'article',
  templateUrl: 'article.html'
})

export class ArticleView {
  constructor(public navCtrl: NavController) {}
}

about.ts

import { Component, ViewChild } from '@angular/core';
import { App, NavController, Tabs } from 'ionic-angular';
import { ArticleView } from '../article/article';

@Component({
  selector: 'about',
  templateUrl: 'about.html'
})

export class AboutView {
  constructor(public navCtrl: NavController) {}

  openArticle(){
    this.navCtrl.push(ArticleView);
  }
}

about.html

<ion-header>
  <ion-navbar>
    <ion-title>About</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <button (click)="openArticle()" ion-button full>Go to article</button>
</ion-content>
2

if you want to select a tab don’t use the navctrl

instead of that in you tabs.html create a ref for ion-tabs

<ion-tabs #baseTabs>
....
</ion-tabs>

now in the about Page
import viewchild from angular core
and use it as follows

@ViewChild('baseTabs') tabRef: Tabs;

now just use thie

this.tabRef.select(number)

hope you got it

3

Yes, I know that I can use .select method and after that I will see a list of articles but I must display single article AND select tab.

4

How can you do this on the AppComponent (e.g. from a side menu?)

5

Am I the only one that as a user would find this a supremely confusing UX experience?

6

This doesn’t work for me. I get the error: core.js:1350 ERROR TypeError: Cannot read property 'select' of undefined

I’m super desperate right now. Why is it so hard in Ionic to activate a Tab manually? :frowning:

1 Like
7

Hi All,
Same I’ve done with my app also as below:

@ViewChild(‘baseTabs’) tabRef: Tabs;

this.tabRef.select(number)

I’m getting error: This doesn’t work for me. I get the error: core.js:1350 ERROR TypeError: Cannot read property 'select' of undefined

8

Hi,
Same I’ve done with my app also as below:

@ViewChild(‘baseTabs’) tabRef: Tabs;

this.tabRef.select(number)

I’m getting error: This doesn’t work for me. I get the error: core.js:1350 ERROR TypeError: Cannot read property 'select' of undefined

Please help me. I’m stuck on this from last 3 days.

9

This is the right Answer. If you get the following error: ERROR TypeError: Cannot read property 'select' of undefined please put this.tabRef.select(<number>) in a ionViewDidLoad() method:

 ionViewDidLoad() {
    this.tabRef.select(3);
 }

Because you are accessing an HTML Element you have to wait until the view has loaded!

And don’t forget to import Tabs from ionic-angular and ViewChild from @angular/core.

Best Regards
Marius :partying_face: