Ionic 6 Full Starter App
IonicThemesBuy NOWLive Preview
  • What is Ionic 6 Full Starter App?
  • About this Ionic template
  • Template versions
  • Set up the development environment
  • Running the Ionic app
  • How to use this template?
  • Ionic Capacitor
  • Ionic Code Structure
  • Ionic Data Integration
  • Theming
  • Ionic Progressive Web App
  • Ionic Navigation
  • Ionic Server Side Rendering (SSR)
  • Ionic Splash Screens and Icons
  • App Shell
    • Image Shell
    • Text Shell
    • Aspect Ratio
  • Ionic Custom Components
    • Checkbox Wrapper
    • Countdown timer
    • Ionic Show/Hide Password
  • Ionic Walkthrough (or tutorial)
  • Categories
  • Ionic Firebase Integration
    • Firebase Authentication
    • Firebase CRUD
    • Firebase Hosting
    • Push Notifications
  • Google Maps & Geolocation
  • Ionic Video Playlist
  • Ionic Multi Language
  • Getting Started
  • Ionic Authentication
  • Ionic Side Menu
  • Ionic Profile
  • Contact Card
  • Social Sharing
  • Ionic Notifications
  • Forms and Validations
  • Filters
  • FAQs
  • Common Errors and Solutions
  • Glossary
  • Upcoming features
  • 🧐Changelog
  • Reviews / Testimonials ⭐️⭐️⭐️⭐️⭐️
Powered by GitBook
On this page
  • How to use this component?
  • Only show the Walkthrough for first time users

Was this helpful?

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.

PreviousIonic Show/Hide PasswordNextCategories

Last updated 3 years ago

Was this helpful?

For the walkthrough we use the 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.

Only show the Walkthrough for first time users

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.

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 (contact@ionicthemes.com) if you have any questions.

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

If you want to show the walkthrough only the first time the user opens the app, you can use the to add a flag. Let's see how to do this.

Authentication
Getting Started
Capacitor Storage API
ion-slides
Last page of Walkthrough