I have tab 1 with a list of items. I have tab 2 with 2 modes, a list of purchases of all items and a list of purchases of a specific item. The default view of tab 2 is the purchases of all the items, when clicking an item, the list changes to show the purchases of the clicked item. That works as expected. Now I want to call tab 2 from tab 1 with a parameter so it will show the purchases of the selected item (sent as a parameter), I did the following in page 1
gotoPage2(info: string){
this.navCtrl.push(InfoPage, { withInfo: info });
}
and the following in page 2
ngAfterViewInit() {
if (this.navParams.get('withInfo') != null) {
this.displayOnlyThisItem(this.navParams.get('withInfo'));
}
}
This is working great except for the fact that tab 2 is not highlighted. I read that for that I should do the following: this.navCtrl.parent.select(3); and that works but I can’t pass it parameters
At first I thought I could live with option 1 above but then I realized that when showing tab 2 with a parameter (tab is not highlighted, showing one item) and then manually select tab 2 (tab is highlighted, showing all items) and then manually select tab 1, I again see tab 2 content (purchases of selected item) as if the app goes “back” and not really selecting tab 1.
How can I simulate the click and highlight of tab 2 with a parameter?
I think this is abuse of tabs and would change the design entirely. Tabs are supposed to be independent sub-worlds, and what goes on in tab A should not affect tab B. If, however, you still want to persist with it, you might want to look into faking it with segments, as they look and feel quite similar.
They are of different worlds but they are connected.
One tab shows items and the other one shows purchases.
If you go to the purchases tabs, you will see purchases of all items but if you go there from an item point of view (click), I want the purchases to be of that specific items. You don’t think it makes sense?
Do segments mean a redesign of the whole thing? Is that mean there is no way to call a tab with a parameter? To me it looks like a basic “feature”.
It makes sense; I just don’t think it’s a good fit for tabs. I would just push a new window onto the nav stack when clicking on an item, showing the purchases of that item. User goes back, you pop that window and go back to item list. Chooses new item, new list of purchases is pushed.
I’m not sure I understand what you mean by “call a tab”, but no, components inside tabs do not have their own lifecycle events. If you stick to treating them as separate self-contained entities, that’s not a problem.
By “call a tab” I simply mean that one tab will open the other tab programmatically and focus it.
I understand your approach, I guess this is what I’m doing now but the user has access to the tabs at the bottom and the icons (of this page) at the top so I can’t force him to click back afterwards, he can click any of the clickable items there. Should I create another page similar to tab 2’s page that contains only the list to cover all the screen, so the user will have to press back in order to continue working?