Having issues exporting my class

Ionic Framework Ionic Angular
1

Hi. I just started coding a week ago, and I am trying to make 2 buttons appear in my ionic app, with the first being an action sheet button, and the second being an alert button. I am copying code from the official ionic documentation, but I am running into an issue when I try to reference a function within my AlertClass in my home.page.html. I get the following error:

Identifier 'presentAlert' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

Any help would be appreciated :slight_smile:

Here is my home.page.html code:

<ion-button (click)="presentActionSheet()" >Action Sheet</ion-button>

<ion-button (click)="presentAlert()">Alert</ion-button>

Here is my home.page.ts code:


import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';



@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');

        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'caret-forward-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }
}

@Component({
  selector: 'alert-example',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class AlertClass {
  constructor(public alertController: AlertController) {}

  async presentAlert() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['OK']
    });

    await alert.present();
}
}

And here is my home.module.ts code:


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

import { HomePageRoutingModule } from './home-routing.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule, 
    
  ],
  declarations: [
    HomePage,
    AlertClass
  ],
})
export class HomePageModule {}
2

you will have to extend alert class in HomePage
tut: https://www.google.com/amp/s/www.digitalocean.com/community/tutorials/angular-component-inheritance.amp

3

Thank you for the response. As I am not familiar with Angular as a whole, and after reading the tutorial you linked, I will need to watch some tutorials on how to use Angular. Thank you for your guidance! I now know I need to continue practicing my Angular skills before jumping into Ionic :sweat_smile: .

4

Especially if you’re not particularly familiar with Angular, I would strongly recommend avoiding inheritance. It’s full of pitfalls, many caused by the fact that JavaScript has no actual object-oriented language functionality. It makes code extremely hard to read (IMHO) by diffusing responsibility.

In short, it’s quite frequently a solution in search of a problem, and I think that’s the case here.

One option would be to put the functionality you have in AlertClass into a service, and inject it in pages you want to use it.

2 Likes
5

Ah ok. Thank you. I will look into this. I am just familiarizing myself with all of these aspects, so I will try to implement AlertClass as a service.