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)

Continue reading...