ionic 2/3 : show splash screen one time

Question

I have an ionic application which has a splash screen opened when I launch the app and then show the home page, the problem is when I return from page to home page the splash screen appear again! I want it to be displayed just one time when the app launched.

Here is the code of html home page :

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
    <div class="flb">
        <div class="Aligner-item Aligner-item--top"></div>
        <img class="splash-screen-logo" src="img/logo.svg">
        <div class="Aligner-item Aligner-item-bottom"></div>
    </div>
</div>
<ion-header>
    <ion-toolbar color="primary">
        <div class="search-icon">
            <ion-icon name="ios-search" icon-only>
            </ion-icon>
        </div>
        <ion-title class="bartitle"><b>parrot</b><small class="city">.city</small></ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>

    <ion-card>
        <img src="img/dirty.jpg">
        <ion-fab (click)="ParrotToast();" class="pubplace" left buttom>
            <img src="img/place.png">
        </ion-fab>
        <div class="row">
            <div class="puboptions col col-33">
                <ul class="row rowlist">
                    <li class="col">
                        <ion-icon class="col" name="md-ribbon"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-thumbs-up"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-share"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-more"></ion-icon>
                    </li>

                </ul>
            </div>
        </div>
        <ion-row>
            <ion-col>
                <ion-item class="pubinformation">
                    <ion-avatar item-start>
                        <img src="img/profile.jpg">
                    </ion-avatar>
                    <h3><b>Essie Bailey</b></h3>
                    <p> <small>ARTIST SPOTTER</small></p>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item class="likes">
                    <ion-note text-center>
                        <b class="likenumber">3 likes</b>
                    </ion-note>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-item class="pubinformation">
                <strong> Museé du Cinquantenaire</strong>
                <small class="datepub">IL Y A 2 SEMAINES</small>
            </ion-item>
            <ion-col class="hashtagsdiv" padding width-10>
                <p class="hashtags">#consectetur #adipiscing #elit #Aliquam #quis #ultrices #quam #at #interdum #ante</p>
            </ion-col>
        </ion-row>
    </ion-card>

    <ion-card>
        <img src="img/dirty.jpg">
        <ion-fab (click)="ParrotToast();" class="pubplace" left buttom>
            <img src="img/place.png">
        </ion-fab>
        <div class="row">
            <div class="puboptions col col-33">
                <ul class="row rowlist">
                    <li class="col">
                        <ion-icon class="col" name="md-ribbon"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-thumbs-up"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-share"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-more"></ion-icon>
                    </li>

                </ul>
            </div>
        </div>

        <ion-row>
            <ion-col>
                <ion-item class="pubinformation">
                    <ion-avatar item-start>
                        <img src="img/profile.jpg">
                    </ion-avatar>
                    <h3>Essie Bailey</h3>
                    <p> <small>ARTIST SPOTTER</small></p>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item class="likes">
                    <ion-note text-center>
                        <b>3 likes</b>
                    </ion-note>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-item>
                <strong> Museé du Cinquantenaire</strong>
                <small class="datepub">IL Y A 2 SEMAINES</small>
            </ion-item>
            <ion-col class="hashtagsdiv" padding width-10>
                <p class="hashtags">#consectetur #adipiscing #elit #Aliquam #quis #ultrices #quam #at #interdum #ante</p>
            </ion-col>
        </ion-row>
    </ion-card>

</ion-content>

and here is the ts file :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ParrotToastPage } from '../parrot-toast/parrot-toast'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  splash=true;
  tabBarElemen: any;
  LogoSplashScreen: any;


  constructor(public navCtrl: NavController) {
    this.tabBarElemen = document.querySelector('.tabbar');

  }

  ionViewDidLoad(){
    this.tabBarElemen.style.display = 'none';

    setTimeout(() => {
        this.splash = false;
    this.tabBarElemen.style.display = 'flex';

    }, 2000);
  }

  ParrotToast(){
    this.navCtrl.push(ParrotToastPage);
  }

}

can someone help please to solve this issue! thanks.

Answer 1

Create the splash-screen as a separate page and then use setTimeout() to set the home-page as rootPage. Use following code in your newly created splash-screen.ts

ionViewDidLoad(){

  setTimeout(() => {
    this.navCtrl.setRoot(HomePage);
  }, 2000);

}

Answer 2

I think you need to use local storage:

this.storage.get('splash').then((splash) => {
  if (splash == undefined || splash == null) {
    this.storage.set('splash', 'visit');
    //show splash
  }
});