How to call functions with (click) inside app.html?

Ionic Framework ionic-v3
1

This is a very simple question but i’m to noob to figure out alone the solution, i googled and looked for explanations but i really think i need someone specifically helping me out on this one

I just implemented a side-menu and i added this code in app.html:

<ion-menu [content]="mycontent">
    <ion-header>
        <ion-toolbar>
            <ion-title>Side Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage()" >
                Today
            </button>
            <button ion-item >
                Time machine
            </button>
            <button ion-item >
                About
            </button>
        </ion-list>
    </ion-content>
</ion-menu>

<ion-nav #mycontent [root]="rootPage"></ion-nav>

Usually i’d write my method in the page specific .ts file but now i have my html code inside app.html which is structured differently and hasn’t an app.ts file. I just want to access and use the openPage() and maybe even more resources and stuff.

What’s the best way to do this?

1 Like
2

See:

image
image.jpg373×665 67.7 KB

1 Like
3

Thank you so much for that, sooo useful. I have no idea how your menu works and your code is incomprehensible for me sadly but i managed to understand how to use methods inside my app.html.

I imported two new components inside my app.component.ts: Nav and ViewChild

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';ar';

Added this weird @ViewChild(Nav) line of code that i have zero clue what it does/means:

export class MyApp {
    rootPage:any = TabsPage;

    @ViewChild(Nav) private nav: Nav;

And created my functions inside the class as usual, using the nav property i just declared and imported:

    public openHomePage() {
        this.nav.setRoot(TabsPage);
    }

It works. but if anyone wanna clear this up i’d be really helpful, thank you.

4

You might want to examine the conference app. It’s pretty heavily commented and describes how this idiom works.

1 Like
5

Wow that’s perfect! Thank you for the link. I’ll definitely take a look.

6

I may be missing something here;) but do you have app.component.ts file close to your template (app.html)?
You need to use that and you need no ViewChild bindings to do that.

Basically in your app.html:

<ion-nav id=“hibro” [root]=“rootPage” (click)=“hibro()”>

in your app.component.ts (after imports and decorators):

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}

hibro() {
console.log(“hi”)
}

7

Hey @Fieel I feel like your answer is a confusion and not a solution. It works simply cause you are using ViewChild to be able to “call” to Nav from your typescript. But from the original post it seems like all you need is to place method into app.component.ts

8

I couldn’t inject my navcontroller in the constructor without errors so the only way to access a nav item and implement the ‘page pushing’ in the method i need is that one as far as i understood.

How am i supposed to call the nav methods if i don’t have a navController or Nav object?

This is what i did at first:

import { NavController } from 'ionic-angular';

  export class MyApp {
    rootPage:any = TabsPage;

    constructor(platform: Platform,
                statusBar: StatusBar,
                splashScreen: SplashScreen,
                public navCtrl: NavController) {

        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
        });

    }

    public openHomePage() {
        this.navCtrl.setRoot(TabsPage);
    }

and this is the error in question:

Capture
Capture.JPG743×815 122 KB

9

Ahh ok I thought your question was not specific to Nav but general.

As for Nav - yes you need to have ViewChild and this binding normally “auto generates” for you when you do ionic start blank etc

10

Can you point me to the documentation part where this kind of constructs are explained? What’s exactly a ViewChild?

11

See: https://angular.io/api/core/ViewChild

2 Likes
12

Thank you, as always! I think i gotta understand angular properly before continuing with Ionic.

13

I think this is sensible. Also I found angular.io’s tutorials and other docs very helpful when it comes to implementation details.

14

I think this is a great attitude. Also, I think Ionic programming is hard, because to do it well, you have to know a lot of other things. So the more tools you can put in your toolbox, the better. Incidentally, when I was learning Ionic, I bought the Angular book by fullstack.io, which was extremely helpful.