Ionic Walkthrough (or tutorial)
This component helps you demonstrate or explain your app to new users. You can showcase the main features of your app.
For the walkthrough we use the ion-slides component with four slides. Of course you can use as many as you want.
To modify this component go to
src/app/walkthrough/walkthrough.page.html
and change the content inside each <ion-slide>
We use SVGs to create the "wave" effect from the backgrounds. You can modify the svgs by using the link we provide in the code.

By pressing the SKIP button, the user will be taken to the last screen of the walkthrough with the option to go to the Authentication page or to Getting Started.

Last page of Walkthrough
If you want to show the walkthrough only the first time the user opens the app, you can use the Capacitor Storage API to add a flag. Let's see how to do this.
So, the first time the user opens the app, he will start with the walkthrough, then, all the following times he opens the app, he will be redirected to the log in page. Let's see how to do this.
On the Walkthrough page add the following code to set a visitedWalkthrough key with a true value on the
ngOnInit
method. ngOnInit(): void {
// save key to mark the walkthrough as visited so the next time the user vistis the app, he would be redirected to log in
Storage.set({
key: 'visitedWalkthrough',
value: 'true'
});
}
Then, add a
CanActivate
angular guard to your walkthrough route. Also, don't forget to add this guard to your routing definition.This guard is evaluated each time the user tries to access the walkthrough route. Here we use again the Capacitor Storage API to get access to our
visitedWalkthrough
key. If the key doesn't exist, our
const { value }
will have a null
value so it will be different from "true", then the canActivate guard returns true.walkthrough.guard.ts
walkthrough.module.ts
src/app/walkthrough/walkthrough.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Plugins } from '@capacitor/core';
const { Storage } = Plugins;
@Injectable()
export class WalkthroughGuard implements CanActivate {
constructor(private router: Router) {}
async canActivate(): Promise<boolean> {
const { value } = await Storage.get({ key: 'visitedWalkthrough' });
if (value === 'true') {
// this is a returning user, don't show him the walkthrough
this.router.navigate(['auth']);
return false;
} else return true;
}
}
src/app/walkthrough/walkthrough.module.ts
const routes: Routes = [
{
path: '',
component: WalkthroughPage,
canActivate: [WalkthroughGuard]
}
];
That's all! Please contact us ([email protected]) if you have any questions.
Last modified 1yr ago