Stephan Bisschop
Stephan Bisschop

Reputation: 319

Ionic/Angular button click: ctx.xxx is not a function

We're trying to get a Ionic modal to show whenever we click on a button. We are following the documentation for Ionic Framework (v5) modal. (https://ionicframework.com/docs/api/modal)

home.page.html

<app-header title="Home"></app-header>

<ion-content [fullscreen]="true">
  <div class="ion-text-center center-vertical">
    <ion-icon class="icon-xl" name="bluetooth"></ion-icon>
    <h3>Not connected</h3>
  </div>

  <ion-fab vertical="center" horizontal="center" slot="fixed" class="ion-text-center">
    <ion-fab-button (click)="showDevices()">
      <ion-icon name="bluetooth"></ion-icon>
    </ion-fab-button>
    <small>Connect</small>
  </ion-fab>
</ion-content>

home.module.ts

import { IonicModule,  } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { ModalController } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';
import { HeaderComponent } from '../header/header.component';
import { DevicesComponent } from '../devices/devices.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    HomePageRoutingModule
  ],
  entryComponents: [HeaderComponent],
  declarations: [HomePage, HeaderComponent]
})
export class HomePageModule {
  constructor(public modalController: ModalController) { }

  public async showDevices() {
    const modal = await this.modalController.create({
      component: DevicesComponent
    });
    return await modal.present();
  }
}

When we click on the button we get the following error:

core.js:6241 ERROR TypeError: ctx.showDevices is not a function
    at HomePage_Template_ion_fab_button_click_7_listener (template.html:10)
    at executeListenerWithErrorHandling (core.js:21819)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:21861)
    at HTMLElement.<anonymous> (platform-browser.js:976)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41645)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
    at invokeTask (zone-evergreen.js:1621)

Anyone have a clue? The type of the showDevices() is a Promise but Angular should be able to handle that right? We've also tried adding "this" as prefix but the error stays the same. Thanks!

Upvotes: 2

Views: 3053

Answers (1)

Stephan Bisschop
Stephan Bisschop

Reputation: 319

Sigh.. We put the code into our module instead of our component. Problem solved, thank you Sergey!

Upvotes: 1

Related Questions