Dynamic Page Navigation in Ionic 2: A step-by-step guide

Question

Dynamic Page Navigation in Ionic 2: A step-by-step guide

I'm currently immersed in a project that involves a series of exercises. When I select an exercise, it takes me to another page where I can watch a video demonstration of that particular exercise. Here's what I have implemented so far:

This is my home.html:

<ion-card *ngIf="oefening1" (click)="navigate(oefening1, oefening2, oefening3, oefening4)">
<img src="assets/img/{{ oefening1 }}.jpg"/>
<ion-card-content>
  <ion-card-title>{{ oefening1 }}</ion-card-title>
  <p>Sets: {{ set1 }}</p>
  <p>Reps: {{ rep1 }}</p>
</ion-card-content>

<ion-card *ngIf="oefening2" (click)="navigate(oefening2, oefening1, oefening3, oefening4)">
    <img src="assets/img/{{ oefening2 }}.jpg"/>
    <ion-card-content>
      <ion-card-title>{{ oefening2 }}</ion-card-title>
      <p>Setjes: {{ set2 }}</p>
      <p>Herhalingen: {{ rep2 }}</p>
    </ion-card-content>
  </ion-card>

This is the navigate function in home.ts:

navigate(exercise, exercise2, exercise3, exercise4){
  this.navCtrl.push(ExercisePage, {
            clickedExercise: exercise,
            secondExercise: exercise2,
            thirdExercise: exercise3,
            fourthExercise: exercise4
    });
  }

This is my exercise.html:

<ion-content padding overflow-scroll="true">
  <ion-grid>
  <ion-row>
    <ion-col col-12>
      <div (click)="playVid()" padding-bottom>
        <img *ngIf="fullPath" [src]="fullPath"/>
      </div>
      <div text-center>
        <button ion-button block [disabled]="!disabledBtn">Block Button</button>
        <button ion-button round (click)="nextExercise()">Complete</button>
      </div>
    </ion-col>
  </ion-row>
  </ion-grid>
</ion-content>

And here's the exercise.ts:

export class ExercisePage {
  public clickedExercise: any;
  public secondExercise: any;
  public thirdExercise: any;
  public fourthExercise: any;
  public fullPath: string;
  public disabledBtn: boolean;

  constructor(public navCtrl: NavController, private streamingMedia: StreamingMedia, public params:NavParams) {
    this.clickedExercise = params.get("clickedExercise");
    this.secondExercise = params.get("secondExercise");
    this.thirdExercise =  params.get("thirdExercise");
    this.fourthExercise = params.get("fourthExercise");
    this.disabledBtn = false;
  }

  playVid(){
     console.log('video completed');

     setTimeout(() => {
      this.disabledBtn = true;
    }, 10000);

    // Playing a video.
    let options: StreamingVideoOptions = {
        successCallback: () => { console.log('Video played') },
        errorCallback: (e) => { console.log('Error streaming') },
        orientation: 'portrait'
    };

    this.streamingMedia.playVideo('http://www.sylvanreinieren.com/fysioWebapp/videos/'+ this.clickedExercise + '.mp4', options);
  }

  ionViewWillEnter() {
    this.fullPath = "assets/img/" + this.clickedExercise + ".jpg";
    // console.log('secondExercise:',this.secondExercise, 'ThirdExercise: ', this.thirdExercise, 'Fourth: ', this.fourthExercise);
  }

  nextExercise(){
    this.clickedExercise = this.secondExercise;
    this.secondExercise = this.thirdExercise;
    this.thirdExercise = this.fourthExercise;

    this.navCtrl.push(ExercisePage, {
        clickedExercise: this.secondExercise,
        secondExercise: this.thirdExercise,
        thirdExercise: this.fourthExercise
    });

    console.log('nextExercise', this.clickedExercise);
  }
}

Essentially, I aim to display the next exercise when the "Next" button is clicked, progressing through each exercise in turn and returning to the home page once all exercises are completed. Unfortunately, it seems to be skipping the second exercise. Any suggestions on how to resolve this issue would be greatly appreciated.

angular typescript ionic2

Answer 1

Answer №1

As mentioned earlier, I believe it would be more beneficial for you to implement this in a slider format. Why?

You are already aware of the number of exercises, which in this case is 4.
Every navCtrl.push creates a new page instead of updating an existing one.
If you eventually expand to have 20 exercises per page, it wouldn't be ideal for users to click back 20 times to exit the exercises.
It's simple to manipulate.

In this instance, my focus will solely be on the exercises page. If you wish to make changes to the Home page to enhance its dynamics, we can certainly address that too.

Exercise.html

<ion-content overflow-scroll="true">
    <ion-slides>
        <ion-slide *ngFor="let ex of allExercises; let i = index">
            <ion-grid>
                <ion-row>
                    <ion-col col-12>
                        <div (click)="playVideo(ex.exercise)" padding-bottom>
                            <img [src]="ex.path" />
                        </div>
                        <div text-center>
                            <!-- disabled if it's the first exercise -->
                            <button *ngIf="i == 0" ion-button round (click)="previousExercise()">Previous</button>
                            <button ion-button block [disabled]="!disabledBtn">Block Button</button>
                            <!-- unavailable if it's the last exercise -->
                            <button *ngIf="i == ;" ion-button round (click)="nextExercise()">Finish</button>
                        </div>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-slide>
    </ion-slides>
</ion-content>

Exercises.ts

import { Slides } from 'ionic-angular';
export class ExercisePage {
    public fullPath: string;
    public disabledBtn: boolean;
    public allExercises: any[] = []; // STORES ALL EXERCISES

    constructor(
        public navCtrl: NavController,
        private streamingMedia: StreamingMedia,
        public params: NavParams,
        public slides: Slides
    ) {
        // SETTING UP EXERCISES AND IMAGE PATHS ON PAGE LOAD
        this.allExercises.push({
            exercise: params.get("clickedExercise"),
            path: 'assets/img/' + params.get("clickedExercise") + '.jpg'
        });
        this.allExercises.push({
            exercise: params.get("secondExercise"),
            path: 'assets/img/' + params.get("secondExercise") + '.jpg'
        });
        this.allExercises.push({
            exercise: params.get("thirdExercise"),
            path: 'assets/img/' + params.get("thirdExercise") + '.jpg'
        });
        this.allExercises.push({
            exercise: params.get("fourthExercise"),
            path: 'assets/img/' + params.get("fourthExercise") + '.jpg' 
        });
        this.disabledBtn = false;

        // prevent swipe to change page
        slides.lockSwipes(true);
    }

    playVideo(exercise: string) {
        console.log('video completed');

        setTimeout(() => {
            this.disabledBtn = true;
        }, 10000);

        // Play video function.
        let options: StreamingVideoOptions = {
            successCallback: () => { console.log('Video played') },
            errorCallback: (e) => { console.log('Error streaming') },
            orientation: 'portrait'
        };

        this.streamingMedia.playVideo('http://www.sylvanreinieren.com/fysioWebapp/videos/' + exercise + '.mp4', options);
    }

    nextExercise() {
        this.slides.lockSwipes(false);
        this.slides.slideNext();
        this.slides.lockSwipes(true);
    }

    previousExercise() {
        this.slides.lockSwipes(false);
        this.slides.slidePrev();
        this.slides.lockSwipes(true);
    }
}

Create an object to store all exercises.

Add each exercise and image path to this object (assuming an exercise is just its name).

Import the Slides component and lock swiping to disable changing slides through swipe gestures (you can enable this if desired).

In your HTML, use ion-slides with ion-slide iterating through all exercises using *ngFor.

The playVideo() function plays the respective video for the selected exercise.

I hope this explanation helps.

Answer 2

As mentioned earlier, I believe it would be more beneficial for you to implement this in a slider format. Why?

You are already aware of the number of exercises, which in this case is 4.
Every navCtrl.push creates a new page instead of updating an existing one.
If you eventually expand to have 20 exercises per page, it wouldn't be ideal for users to click back 20 times to exit the exercises.
It's simple to manipulate.

In this instance, my focus will solely be on the exercises page. If you wish to make changes to the Home page to enhance its dynamics, we can certainly address that too.

Exercise.html

<ion-content overflow-scroll="true">
    <ion-slides>
        <ion-slide *ngFor="let ex of allExercises; let i = index">
            <ion-grid>
                <ion-row>
                    <ion-col col-12>
                        <div (click)="playVideo(ex.exercise)" padding-bottom>
                            <img [src]="ex.path" />
                        </div>
                        <div text-center>
                            <!-- disabled if it's the first exercise -->
                            <button *ngIf="i == 0" ion-button round (click)="previousExercise()">Previous</button>
                            <button ion-button block [disabled]="!disabledBtn">Block Button</button>
                            <!-- unavailable if it's the last exercise -->
                            <button *ngIf="i == ;" ion-button round (click)="nextExercise()">Finish</button>
                        </div>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-slide>
    </ion-slides>
</ion-content>

Exercises.ts

import { Slides } from 'ionic-angular';
export class ExercisePage {
    public fullPath: string;
    public disabledBtn: boolean;
    public allExercises: any[] = []; // STORES ALL EXERCISES

    constructor(
        public navCtrl: NavController,
        private streamingMedia: StreamingMedia,
        public params: NavParams,
        public slides: Slides
    ) {
        // SETTING UP EXERCISES AND IMAGE PATHS ON PAGE LOAD
        this.allExercises.push({
            exercise: params.get("clickedExercise"),
            path: 'assets/img/' + params.get("clickedExercise") + '.jpg'
        });
        this.allExercises.push({
            exercise: params.get("secondExercise"),
            path: 'assets/img/' + params.get("secondExercise") + '.jpg'
        });
        this.allExercises.push({
            exercise: params.get("thirdExercise"),
            path: 'assets/img/' + params.get("thirdExercise") + '.jpg'
        });
        this.allExercises.push({
            exercise: params.get("fourthExercise"),
            path: 'assets/img/' + params.get("fourthExercise") + '.jpg' 
        });
        this.disabledBtn = false;

        // prevent swipe to change page
        slides.lockSwipes(true);
    }

    playVideo(exercise: string) {
        console.log('video completed');

        setTimeout(() => {
            this.disabledBtn = true;
        }, 10000);

        // Play video function.
        let options: StreamingVideoOptions = {
            successCallback: () => { console.log('Video played') },
            errorCallback: (e) => { console.log('Error streaming') },
            orientation: 'portrait'
        };

        this.streamingMedia.playVideo('http://www.sylvanreinieren.com/fysioWebapp/videos/' + exercise + '.mp4', options);
    }

    nextExercise() {
        this.slides.lockSwipes(false);
        this.slides.slideNext();
        this.slides.lockSwipes(true);
    }

    previousExercise() {
        this.slides.lockSwipes(false);
        this.slides.slidePrev();
        this.slides.lockSwipes(true);
    }
}

Create an object to store all exercises.

Add each exercise and image path to this object (assuming an exercise is just its name).

Import the Slides component and lock swiping to disable changing slides through swipe gestures (you can enable this if desired).

In your HTML, use ion-slides with ion-slide iterating through all exercises using *ngFor.

The playVideo() function plays the respective video for the selected exercise.

I hope this explanation helps.

Dynamic Page Navigation in Ionic 2: A step-by-step guide

Answer №1

Similar questions

It is crucial to include the _id field in the findOneAndUpdate operation

Allow for various index.html files to be supported based on the environment, using both nginx and Angular

I am looking to personalize the AddedToCartDialogComponent with the selector cx-added-to-cart-dialog

Dealing with null-safe operators issues has been a challenge for me, especially while working on my Mac using

Production environment causing issues with router.url functionality

The FOR UPDATE clause is not functioning as intended in the SELECT query

Tips for testing nested subscribe methods in Angular unit testing

Encountering a problem with SCSS variable declaration in React JavaScript when converting to TypeScript

Encountered an error while iterating through an array in Angular: "Cannot access property at index

A function in Typescript is created to handle diverse input types in a generic manner

Exploring Recursive Types in TypeScript

Controlling the visibility of an element in Angular2 by toggling it based on an event triggered by a

Experimenting with Typescript, conducting API call tests within Redux actions, mimicking classes with Enzyme, and using Jest

When examining two arrays for similarities

Can the hexadecimal value from an input type color be extracted and used to populate form fields that will then be displayed in a table after submission?

Linking an npm package to a custom TypeScript definitions file in a local directory

Altering the inner HTML content of a div using the ID within an Angular component function

What are the steps for utilizing the watch feature in Vue.js with TypeScript?

Failed to execute start script 'ng serve' in npm start

Protect the integrity of string output while maintaining the original spacing