Programatically change active tab on Ionic

Ionic Framework ionic-v3
22

That did the trick! Thanks!

23

Ohoooo, :smiley: Thanks allot I was looking only for this code. It helped me allot thank you very much

24

That worked for me! Really helpful

25

Worked for me - thanks a lot

26

Hi!
Thank you very much for your solution.
In my case I want to reload the page under the selected tab but this solutions does not reload the page.
Any suggestion please?

Thanks

27

No, you donā€™t. Thatā€™s not a meaningful concept in an Angular app, so there is something wrong with the way you are populating the data in your component. Change the properties of the component, and Angularā€™s change detection will update the DOM appropriately so it looks like a ā€œpage reloadā€ (but really isnā€™t).

28

@rapropos I want the constructor to be called again

29

Then you are doing things in the constructor that you should not be doing. Use lifecycle events such as ionViewWillEnter() instead.

30

Thank you very much! this was what I was looking for :slight_smile:

31

yes It will work 100%

32

I am having trouble getting this to work from the Three Dee touch pluginā€¦ the plugin fires correctly, but nothing happensā€¦

ngAfterViewInit() {
this.initScrollListener();
let outer = this;

this.threeDeeTouch.isAvailable().then(isAvailable => {
  console.log('### 3 d available: ' + isAvailable);
  if(isAvailable) {
    this.threeDeeTouch.watchForceTouches()
      .subscribe(
        (data: ThreeDeeTouchForceTouch) => {
          console.log('Force touch %' + data.force);
          console.log('Force touch timestamp: ' + data.timestamp);
          console.log('Force touch x: ' + data.x);
          console.log('Force touch y: ' + data.y);
        }
      );
    let actions: Array<ThreeDeeTouchQuickAction> = [{
        title: 'Home',
        iconType: 'home'
      }, {
        title: 'Policy',
        iconType: 'compose'
      }, {
        title: 'Mayors',
        iconType: 'home'
      }, {
        title: 'Meetings',
        iconType: 'book'
      }
    ];

    this.threeDeeTouch.configureQuickActions(actions);
    console.log('### config actions.');

    this.threeDeeTouch.onHomeIconPressed().subscribe(
     (payload) => {
      // returns an object that is the button you presed
      console.log('Pressed the: ' + JSON.stringify(payload));
      console.log('### title: ' + payload.title);

      if(payload.title == 'Mayors') {
        outer.navCtrl.parent.select(2); 
      } else if(payload.title == 'Home') {
        outer.navCtrl.parent.select(0); 
      } else if(payload.title == 'Policy') {
        outer.navCtrl.parent.select(3); 
      } else if(payload.title == 'Meetings') {
        outer.navCtrl.parent.select(1); 
      }
     }
    )

  }
});

}

33

The constructor is called only once when the component is being created. Use ionic lifecycle events for such here is ionic blog on thatt

34

Hey all, I did the suggested:

this.nav.getActiveChildNav().select(page.index);

then when running it I get in the console:

(getActiveChildNav) is deprecated and will be removed in the next major release. Use getActiveChildNavs instead.

What would be the up to date solution now? I canā€™t find documentation on what the select() method doesā€¦

Any help? Cheers!!

35

hey. I wrote a little bit down on this issue.
you can find it here:
https://www.one-second.me/tips-and-tricks/ionic-programmatically-change-active-tab

it works something like this:

const tabsNav = this.app.getNavByIdOrName('myTabsNav') as Tabs;
tabsNav.select(1);

---

<ion-tabs name="myTabsNav">
...
</ion-tabs>

have fun :wink:

6 Likes
36

marked, love it, work like a charm, any explanation on how this works?

37

hey.
sry i canā€™t follow. how does what work? you mean the code above?

38

Hey nvm I got it working the old method was deprecated

40

works like charm. Really helped a lot

41

Works like a charm!!! Marked like Thx!!

42

hi,

how to achieve this in ionic 1?
i tried $ionicTabsDelegate.select(1); but doesnt work.