Conditionally routing page in Ionic 3 Lazy module

I have 3 different pages in a lazy loading Ionic 3 app "LoginPage et "VideoPage" and "HomePage".

In my video page there is a checkbox who says: "Show this video at the next start" if the checkbox is clicked.

So the normal "routing" if I can say so because it is just push of pages on top of the stack is :

"LoginPage ==> "VideoPage" ==> "HomePage" (checkbox clicked)

"LoginPage ==> "HomePage" (checkbox not clicked)

Also the app should remember the choice at the next start even if it is a while later (maybe using storage value).

Also in my login page there is a key value logic using storage already you will see that in the code shown here:

(I think it could be possible if the videoPage could @output an event/variable to tell the login page if it should go to homePage or to videoPage..I am searching it this way.. )

PS: If you have any question or suggestion feel free to ask

login.html:

   <ion-item no-lines>
      <ion-label floating>Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>

    <button class="charlotte-button" ion-button icon-left (click)="login()">
      <ion-icon class="picto picto-checkbox-active-w"></ion-icon>
      Login
    </button>

login.ts:

 export class LoginPage {  public password: string = '';
   public key: string = 'username'; 

   constructor(
    public navCtrl: NavController, public storage: Storage, private alertCtrl:  
   AlertController ) 

  login() {
     if (this.password === this.key) {
      this.storage
    .set(this.key, this.password)
    .then(val => this.navCtrl.setRoot('LoginPage'));
    } else {
      let alert = this.alertCtrl.create({
    title: 'Wrong password try again !',
    buttons: ['Dismiss']
   });
  alert.present();
}
}
}

Video.html:

  <div class="video-container">
  <video controls>
   <source    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_ 
 surround.mp4" 
          poster="https://peach.blender.org/wp- 
   content/uploads/title_announcement.jpg?x11217"
          type="video/mp4">
   </video>
  <div class="video-title">Tutorial</div>
  </div>

  <ion-item no-lines class="checkbox-container">
<ion-label class="diLabel">Show this video at the next start</ion-label>
<ion-checkbox [(ngModel)]="disableVideo"></ion-checkbox>
</ion-item>

video.ts (this one is really what I am trying and didn't work at all):

export class VideoPage { 

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

if(this.disableVideo) {
  this.navCtrl.setRoot('VideoPage')
 }
   else() => {
  this.navCtrl.setRoot('Homepage')
   }
 }
 }

home.html / home.ts:

I put any code there because it is not helping the subject (maybe I am wrong tell me)

There's a main question in this to know where you'll check if the user has checked the checkbox of the video, the user'll always need to login? You'll not persist any kind of token or anything to check if the user has already loged in or if the login is valid?

If the user always need to login then you'll check if the checkbox was checked in the login page. You'll need to persist the checkbox information, you already know how to use Storage as far as i can see in your code, so save your checkbox in a key in your storage, using an event or behaviourSubject or @output will not work as expected because the user never saved his preference on showing or not the video page, so do something like this:

video.html:

<ion-item no-lines class="checkbox-container">
  <ion-label class="diLabel">Show this video at the next start</ion-label>
  <!-- just check if it's (change) event or (ionChange) in the checkbox docs -->
  <ion-checkbox [(ngModel)]="disableVideo" (change)="changeCheckbox()"></ion-checkbox>
</ion-item>

video.ts

export class VideoPage { 
  public disableVideo: boolean = false;
  // import storage
  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
    storage.get('yourCheckboxStatus').then(check => this.disableVideo = check);
  }

  // let's keep the checkbox status always updated
  changeCheckbox = () => this.storage.set('yourCheckboxStatus', this.disableVideo);

  // don't know what this does, you're already in your video page, you don't need to check and send it to VideoPage again.
  checkClicked() {
    if(this.disableVideo) {
      this.navCtrl.setRoot('VideoPage')
    } else => {
      this.navCtrl.setRoot('AcceuilPage')
    }
  }
}

Then in your login page you'll need to do this when the user login:

login() {
  if (this.password === this.key) {
    this.storage
      .set(this.key, this.password)
      .then(val => {
        this.storage.get('yourCheckboxStatus').then(check => {
          if(check) this.navCtrl.setRoot('VideoPage')
          else this.navCtrl.setRoot('HomePage');
        });
      });
  } else {
    this.alertCtrl.create({
      title: 'Wrong password try again !',
      buttons: ['Dissmiss']
    }).present();
  }
}

If the user'll not have to login every time or you want to check it as the app initializes you can use it in your app.components file