Set first page IntroPage using ion-slider ionic

Ionic Framework ionic-v3
1

I generated a tabs app. Now I have added a pages for a ion-slider and this needs to be the first view shown before the user moves to the tabs - how do you see the first page in ionic 2?


import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { IntroPage } from '../pages/intro/intro';
import { HomePage } from '../pages/home/home';
import { PostPage } from '../pages/post/post';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpModule } from '@angular/http';
import { Device } from '@ionic-native/device';

@NgModule({
  declarations: [
    MyApp,
    IntroPage,
    HomePage,
    PostPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    IntroPage,
    HomePage,
    PostPage,
    TabsPage,
  ],
  providers: [
    Device,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
2

Step 1. Create your intro page
Step 2. Store with Ionic storage to check if the user already saw the intro after the first start.
Step 3. Check this value. If not set, set the intro page as root page in your app.component.ts file.
Step 4. On the last intro slide create a button. If the user clicks this button, set the tabs page as root page. And set the value in the storage so at the next start the tabs page is the root page.

That it :slight_smile:


export class MyApp {
  rootPage: any;

  constructor(platform: Platform, private dataService: DataServiceProvider, splashScreen: SplashScreen, private statusBar: StatusBar, private config: Config, private appRate: AppRate) {
    platform.ready().then(() => {
      this.init();
      dataService.getUserInfo().then(
        (data) => {
          if (data !== null) {
            this.rootPage = 'GamePage';
          } else {
            this.rootPage = 'IntroPage';
          }
          splashScreen.hide();
        }
      );
    });
  }
}
1 Like
3

Can you share an example of dataService.getUserInfo() ts file?

4

It is nothing more than this:

isIntroShown() {
   return this.storage.get('intro');
}

Here you can read how to use Ionic Storage: https://ionicframework.com/docs/storage/

5

@LoLStats
Perfect!!! Thanks a lot…

1 Like