Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 71531

`Select` only from shown tabs

$
0
0

@ajcrites wrote:

I have a tabbed layout that looks like this:


<ion-tab [root]="accountPage"></ion-tab>
<ion-tab [show]="!(isLoggedIn | async)" [root]="guestFavoritesPage"></ion-tab>
<ion-tab [show]="(isLoggedIn | async) && (favorites | async)" [root]="favoritesPage"></ion-tab>
<ion-tab [show]="(isLoggedIn | async) && !(favorites | async)" [root]="emptyFavoritesPage"></ion-tab>

If this is difficult to understand, there is an "Account" tab and then effectively a single "Favorites" tab. The type of Favorites tab that gets shown is: "Guest" for logged out uses, "Empty" for logged-in users with no favorites, and "Favorites" for logged-in users that have favorites.

You can log in on the account page which sets isLoggedIn = true. If you do so and then navigate to the favoritesPage, everything works fine.

However, you can also log in on guestFavoritesPage. After doing so, the "favorite" tab will be deselected (i.e. no tab will be selected), and the guestFavoritesPage is still visible.

After Logging in, I try to do this.navCtrl.parent.select(2), but this selects the Favorites tab explicitly. For certain users, I may want to select the Empty favorites tab. I can do a check and select the appropriate tab as needed, but I'm wondering if it's possible to know ahead of time which tabs are visible and select from the index of visible tabs.

Essentially there will only ever be two tabs (in this example), I'm just doing this as a way to use a different top level page for a tab depending upon the user's state. I would like to be able to select from visible tabs because the absolute order of the tabs may change in some way if more states are needed, but there will always be the 0th visible tab, Account, and the 1st visible tab, Favorites.

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 71531

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>