Angular 2 and Ionic 3 - TypeError: (...) is not a function

Question

I am trying to build an app with a simple click function. I added the handler to the buttons in the users.html page, and the app runs until I arrive at the page where I can click on either of the two handled buttons. When I click on the buttons, I get the error noted below, that it is not a function.

I defined the function onLoadUser() in the users.ts file. The class is exported.

Technology

Ionic 3
Angular2

Error

Directory structure

users.html

<ion-header>

  <ion-navbar>
    <ion-title>The Users</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <button ion-button (click)="onLoadUser('Max')">User 'Max'</button>
  <hr>
  <button ion-button (click)="onLoadUser('Anna')">User 'Anna'</button>
</ion-content>

<ion-footer padding>
  <p>The Footer</p>
</ion-footer>

users.ts

import { Component } from '@angular/core';

import { NavController } from "ionic-angular";

import { UserPage } from "./user/user";

@Component({
  selector: 'page-users',
  templateUrl: 'users.html'
})

export class UsersPage {
  constructor (private navCtrl: NavController) {}

  onLoadUser(name: string) {
    this.navCtrl.push(UserPage, {userName: name});
  }
}

How can I connect the onLoadUser function to the button click event?

I don't see any problem with your code. You may try rebuilding the project, or clearing the browser cache before running it again. — Martin Parenteau
– Martin Parenteau, Commented Jan 2, 2018 at 1:53
I have seen this happen before when something in the Css is actually hiding or disabling the button. May want to double check that. Code looks good to me as well. — ToddB
– ToddB, Commented Jan 2, 2018 at 2:03
I had similar bugs when using ionic serve command. you just have to save the ts and the html file again and again. or re run ionic serve. — Diluk Angelo
– Diluk Angelo, Commented Jan 2, 2018 at 3:51
hmm.. its working in stackblitz. stackblitz.com/edit/ionic-8kyteb?file=pages%2Fhome%2Fhome.html is your page configured correctly in app module? — Suraj Rao
– Suraj Rao, Commented Jan 2, 2018 at 4:42

ir2pid · Accepted Answer · 2018-11-08 07:59:10Z

5

This is a bug with ionic hot reload. I experience it with ionic 3. Make sure the method name is correct. If you still get the error:

repeatedly save the .ts, .html etc files where you made recent changes. And hope the next reload works
Refresh the browser
If you are using device debugging on chrome, change the target device.
The last but sure way to fix it is to run ionic serve again

answered Nov 8, 2018 at 7:59

ir2pid

6,25616 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 2 and Ionic 3 - TypeError: (...) is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related