Setting default page in Ionic tabs

Hy everyone

I have the following situation and would need a litle help.

Two tabs show two lists. The first list is the list of contacts and when user clicks on particular item it leads him to contact details.
User can add contacts to favorites, which is another list displayed in second tab.

When user goes to contact details from tab 1, then switches to tab 2 and gets back to tab 1 contact details will still be shown because every tab has it’s own stack and remembers top page in the stack.
I want to pop to root every time when I change tab (to show a list and not contact details) and I’m wondering where to implement that logic.

I tried in TabsPage on tab change event and it works but after that I have problems with change detection.

@ViewChild(‘tabs’) tabRef: Tabs;
tabChanged(event) {
  event.pop({animate: false});
}

Change detection Problem:

List of favorites can be reordered by using Ionic 2 list reorder property. I also want to enable/disable reorder by clicking on a button. It looks like this:

<ion-list [reorder]="reorderEnabled" (ionItemReorder)="reorderItems($event)">

[reorder] property defines if list is enabled or disabled and I’m changing it with “reorderEnabled” variable which is a private variable (boolean) of my class.
I have a “toggle reorder” button used for toggle “reorderEnabled” variable. When I come from tab 1 to tab 2 and click “toggle reorder” button (and “tabChanged” event is implemented) nothing happens. So I have to go to favorite item details page, get back to favorites list and “toggle reorder” button starts working normally.

When I turn off “tabChanged” event everything works fine.

It looks like I have to wake up Angular to start performing change detection. I’m doing that by changing pages in the current stack (from list to details and back). I’m not sure if it’s related to Angular or Ionic

Using Ionic v2.0.0-beta.10

Thanks

Here’s a solution for this problem: https://github.com/colinjlacy/ionic-2-smart-tabs
Also a great article related for this repository: Exploring Nav Hierarchy in the Ionic 2 Tabs Page

Enjoy :grin:

1 Like