How should you Handle Tab Based Applications in Ionic?

[selected-pixel-jameson]

Hello,

I'm running into an issue with my Ionic Tab based Application. I'm noticing that if I have 2 tabs both which have a tour in them I can't have them both showing at the same time because the needs to be in the app.component.html.

This presents and issue because if a tour is started in Tab 1 and then a user navigates to Tab 2 the tour will show over all other elements regardless of the tab. This also presents issues when navigating backwards and forwards if the Tour is started at the same moment a user clicks to navigate e

Is there a way to specify a specific for each tab and provide an ID of some sort? Something along the lines of

<tour-step-template anchorTemplateId='tab1'></tour-step-template>
<tour-step-template anchorTemplateId='tab2'></tour-step-template>

Then when initializing the tour I could specify which template I want it to use.

[hakimio]

• There can't be multiple tours running at the same time since TourService is global to the whole app. Normally if the user (not the UI tour itself) navigates to a different page (app route changes), the tour ends automatically.
• If you want to have multiple step templates for different tabs of the application, you can just use *ngIf to switch between the templates:

<tour-step-template>
    <ng-template let-step="step">
        <ng-container *ngIf="activeTab === 'tab1'; else tab2Template">
            <app-tab1-template [step]="step" />
        </ng-container>

        <ng-template #tab2Template>
          <app-tab2-template [step]="step" />
        </ng-template>
    </ng-template>
</tour-step-template>

• You can use route config to automatically navigate to a different route after user clicks "Next", or you can use nextOnAnchorClick to continue the tour when user clicks on tab2 in your app. In the last case, you might also want to enable allowUserInitiatedNavigation option.

[selected-pixel-jameson]

@hakimio Thank you. I will give this a try.