Storage slider

Ionic Framework ionic-v3
1

I have a slider that leads to a page when I press a button. I want only the slider to appear the first time, and when I re-enter the app, it does not appear and only loads the page. My code:

Slides.html

<ion-content>
  <ion-slides pager="true">

    <ion-slide>
      <h4>Las remiserias de tu ciudad</h4>
      <p>Todas las remiserias en una sola app</p>
      <img src="../../assets/imgs/taxi.png" />
    </ion-slide>

    <ion-slide>
        <h4>Mira el recorrido del colectivo</h4>
        <p>Desde la app podras visualizarlo aun sin conexion</p>
      <img src="../../assets/imgs/bus.png" />
    </ion-slide>

    <ion-slide>
        <h4>Mapas sin conexion</h4>
        <p>Para cuando no tenemos internet :p</p>
      <img src="../../assets/imgs/marker.png" height="150px" />
    </ion-slide>

    <ion-slide>
        <h4>Selecciona tu ciudad</h4>
          <img src="../../assets/imgs/select.png" /> 
          <ion-card>
              <ion-list>
                  <ion-item>
                    <ion-label (click)="cdelu()">Concepcion del Uruguay</ion-label>
                  </ion-item>
                  <ion-item >
                  <ion-label >Colon</ion-label>
                </ion-item>
                </ion-list>
          </ion-card>

    </ion-slide>

  </ion-slides>


</ion-content>

Slides.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CdeluPage } from '../cdelu/cdelu';

@IonicPage()
@Component({
  selector: 'page-slides',
  templateUrl: 'slides.html',
})
export class SlidesPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {

}
cdelu(){
  this.navCtrl.push(CdeluPage);

}
}

Cdelu.ts //Page where i want to go and storage in local. When i open my app, this page it shows.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';


@IonicPage()
@Component({
  selector: 'page-cdelu',
  templateUrl: 'cdelu.html',
})
export class CdeluPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
  }

  ionViewDidLoad() {
    this.storage.get('slides-done').then(done => {
      if (!done) {
        this.storage.set('slides-done', true);
        this.navCtrl.setRoot(CdeluPage);
      }
    });
  }
  }
2

If you are working with local storage then its pretty straight forward by what you want to do.

  • First step:
    When you pressed the button for the first time save a boolean as example like Button_clicked = true.

  • Second step:
    When you start the App load the localstorage and look for the boolean if the boolean is set to true simply hide the slider.

Thats it in theory hope this gave you a little idea what you can do now :four_leaf_clover::blush:

1 Like
3

localstorage is best way to achieve this kind of functionality

4

can you give an example?