Ionic v3 - show ionic page just once

@gilbertlucas46 wrote:

Hi I’m currently creating a webapp. one of the requirements is to create an intro slider to teach user how the app works, then theres a button to get to the TabsPage which contains login and signup tabs.

I’m trying to just display the intro slider once if its the first time the users viewed the website app.

Is there some kind of set cookie for ionic??

Here’s the source code:

intro.html

    <ion-content>
      <ion-slides #mySlider pager (ionSlideDidChange)="onSlideChange()" [class]="activeSlide">
        <ion-slide *ngFor="let slide of slides">
          <img [src]="slide.image">
          <div class="caption">
            <h2>{{slide.title}}</h2>
            <p>{{slide.description}}</p>
          </div>
          <div class="userNav" *ngIf="activeSlide == 'slideBG2'">
              <button ion-button   (click)="goToSignup() ">signup</button>
              <button ion-button   (click)="goToLogin() ">Login</button>
          </div>
          
        </ion-slide>
      </ion-slides>
      <button *ngIf="activeSlide !== 'slideBG2'" class="nextSlide" (click)="goToSlide()">Next</button>
    </ion-content>

intro.ts

  import { Component, ViewChild } from '@angular/core';
    import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
    import { TabsPage } from '../tabs/tabs';
    import { SignupPage } from '../signup/signup';
    import { LoginPage } from '../login/login';
    
    
    @IonicPage()
    
    @Component({
      selector: 'page-intro',
      templateUrl: 'intro.html',
    })
    
    export class IntroPage {
      introSlides: any;
      splash = true;
    
      
      constructor(public navCtrl: NavController, public navParams: NavParams) {
        
      }
    
    @ViewChild('mySlider') slider: Slides;
      public currentindex
      public objectindex
      public activeSlide = 'slideBG0';
    
    
    slides = [
    {
      title: "Juce up your life",
      description: "lorem",
      image: "assets/imgs/intro/slides/slide1.png",
    },
    {
      title: "Anytime, anywhere",
      description: "lorem",
      image: "assets/imgs/intro/slides/slide2.png",
    },
    {
      title: "Get started",
      description: "lorem.",
      image: "assets/imgs/intro/slides/slide3.png",
    }
    ];
    
    
    public onSlideChange() {
      this.currentindex = this.slider.getActiveIndex();
      this.activeSlide = 'slideBG' + this.currentindex;
      // console.log(this.activeSlide);
    } 
    goToSlide() {
      let currentIndex = this.slider.getActiveIndex() + 1;
      this.slider.slideTo(currentIndex, 500);
    }
    
        goToLogin() {
      this.navCtrl.setRoot(TabsPage, {
        tabIndex: 1
      });
    }
    goToSignup()  {
      this.navCtrl.setRoot(TabsPage, {
        tabIndex: 0
      });
    }
        
      ionViewDidLoad() {
        // console.log(this.introSlides);
        setTimeout(() => {
          this.splash = false;
        }, 4000);
      }
     
    }

tabs.ts

import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import { LoginPage } from '../login/login';
    import { SignupPage } from '../signup/signup';
    
    @Component({
      templateUrl: 'tabs.html'
    })
    export class TabsPage {

      tab1Root = SignupPage;
      tab2Root = LoginPage;
      seltabix: number;
    
    
      constructor(public navCtrl: NavController, public navParams: NavParams) {
    
        this.seltabix = this.navParams.get('tabIndex');
      }
    }

tabs.html

    <ion-tabs tabsPlacement="top" [selectedIndex]="seltabix">
      <ion-tab [root]="tab1Root" tabTitle="Signup"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Login"></ion-tab>
    </ion-tabs>

app.component.ts

export class MyApp {
      rootPage:any = IntroPage;
    
      constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
          statusBar.styleDefault();
          splashScreen.hide();
        });
      }
    }

Posts: 1

Participants: 1

Read full topic