stenciljs webcomponents : ion-router for a simple step-by-step wizard? - web-component

Question

my stencil app is a step-by-step wizard. In app-root.tsx I have
render() {
return (
<ion-app>
<ion-router useHash={false}>
<ion-route component="app-home" >
<ion-route url="/" component="step-one" />
<ion-route url="/two/:data" component="step-two" />
<ion-route url="/three/:data" component="step-three" />
</ion-route>
</ion-router>
<ion-nav />
</ion-app>
);
}
in app-home.tsx I have
<ion-navbar>
<ion-tabs>
<ion-tab tab="tab1" component="step-one" />
<ion-tab tab="tab2" component="step-two" />
<ion-tab tab="tab3" component="step-three" />
<ion-tab-bar slot="top" selectedTab={this.selectedTab)}>
<ion-tab-button tab="tab1">Step One</ion-tab-button>
<ion-tab-button tab="tab2">Step Two</ion-tab-button>
<ion-tab-button tab="tab3">Step Three</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-navbar>
at some point I would like to diable the ion-tab-buttons and use them only to display the active tab, but now they are active since I have several problems :
the app doesn't start with the content of "step-one" (a form). I see the tabs at the top and I can click on any tab to select it, but how to make it start at step-one ? ( this.selectedTab = 'tab1' in componentWillLoad)
in step-one I put a <ion-button disabled={!this.valid} routerDirection = 'forward'>Next</ion-button> that shows up, is enabled when the form is filled, but when I click on it, nothing happens (I tried href="/two" without success...)
how to pass the form data to the next steps, by the way ?
Any help appreciated... Thanks !

Answer 1

In the route definitions the component should be the name of the tab (the tab property) and not the component inside of the tab (see Router integration in the ion-tabs docs).
<ion-route component="app-home">
<ion-route url="/" component="tab1" />
<ion-route url="/two/:data" component="tab2" />
<ion-route url="/three/:data" component="tab3" />
</ion-route>
The reason that the button doesn't work with the href attribute is probably the missing :data parameter.
I suggest not passing the data through the URL but to use a central data store, for example Stencil Store. That way you don't have to worry about URL encoding etc.