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.

How to use this component?

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

Only show the Walkthrough for first time users

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

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;
  }
}

walkthrough.module.ts

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.