Ionic & Angular - Reusable 'next page' button

Question

I am building a game with Angular and Ionic 3 and since the game has a lot of pages/views, I want to eliminate writing the same code in the ts file of the pages I have buttons.

My question is the following, is it possible to create a 'reusable' button that moves the current view to another one? What I mean by 'reusable' is to declare the button click function in app.ts and change the destination page dynamically from the HTML.

What I have done so far:

in home.html

<button ion-button color="light" (click)="moveToPage(gameSettings)">One Player</button>

Note: The page class I want to go to is "gameSetting" which is part of my project in /pages/game-settings/

in app.ts

constructor(public navCtrl: NavController, public navParams: NavParams) {
    moveToPage(pageName: String)
    {
        this.navCtrl.push(pageName);
    }
}

Unfortunately, this does not work! What happens is that the HTML passes 'pageName' as a variable with an undefined type i.e. it throws an error. The navCtrl page of Ionic only explains how to move to another page by explicitly the page name in the this.navCtrl.push() function. https://ionicframework.com/docs/api/navigation/NavController/

Any help regarding this behaviour would be much appreciated.

What is your pageName variable in HTML? I mean, where do you give it a value? — Gianluca Paris
Fair point, I will update the HTML file to eliminate the confusion now. What I want to do is to pass the name of the page I want to go to in HTML. — Kristiyan D Kovachev
@GianlucaParis, your previous answer was right, while trying to get the plunker done I fixed a typo in my code so you did answer my question. Feel free to add your answer below — Kristiyan D Kovachev

Gianluca Paris Gianluca Paris · Accepted Answer · 2018-01-22T12:34:11

You have just to change (click)="moveToPage(gameSettings)" to (click)="moveToPage('gameSettings')". Just missing the ''

Ionic & Angular - Reusable 'next page' button

1 Answers