How to set Ion Slide to only view once by FIRST TIME users?

Question

I am currently using ionic 4 and angular 8.

How do I implement by ion slides to be only viewed once by first-time users? I have seen lots of solutions and ways on how to do it on Ionic 1/2 but I see none on ionic 4. Please advise.

Answer 1

Here's one possible solution. It involves using local storage. Just store a key/value pair in storage and look it up when the app starts. If the key exists then do not show the slider. Below is an example of its implementation. This is not fine-tuned but hopefully will get the point across...

Be sure you have Ionic Capacitor enabled. If you do not, run this command:

ionic integrations enable capacitor

Then install Ionic Storage and Sqlite

 npm install @ionic/storage --save
 npm install cordova-sqlite-storage --save

import Ionic Storage in app.module.ts

... all of your other imports
import {IonicStorageModule} from '@ionic/storage';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
            ... all of your other imports, 
            IonicStorageModule.forRoot()
           ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

Create a storage servive

ionic g service storage

Add a couple of functions to get and save to storage.

storage.service.ts

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  firstTime: boolean;

  constructor(private storage: Storage) { }

  saveFirstTimeLoad(): void {
    this.storage.set('firstTime', true);
  }

  isFirstTimeLoad(): void {
    this.storage.get("firstTime").then((result) => {
      if (result != null) {
        this.firstTime = false;
      }
      else {
        this.firstTime = true;
      }
    })
  }
}

Initialize the service in app.component.ts

... all of the other imports
import { StorageService } from './storage.service';

export class AppComponent {
    constructor(... all of the other initializations,
                private storageService: StorageService) {
        this.storageService.isFirstTimeLoad();
    }

Then in your page component assign a property to use in the html

export class HomePage implements OnInit {

  firstTime: boolean;
  constructor(private storageService: StorageService) {  }

  ngOnInit() {
    this.firstTime = this.storageService.firstTime;  

    //if first time update first time 
    if(this.firstTime){
      this.storageService.saveFirstTimeLoad();
    }
  }

}

Finally use an ngIf to decide whether to render the component or not.

<ion-item *ngIf="firstTime">
  <ion-label>
     First Time!
  </ion-label>
</ion-item>
<ion-item *ngIf="!firstTime">
  <ion-label>
    NOT First Time
  </ion-label>
</ion-item>

Hope this helps.