Alertcontroller Not Working

Ionic Framework ionic-v3
1

Hello,

I am new to ionic. I barely know basics about html & css. I have not a single clue about javascript. However, I am determined to develop a small project in the form of an app for my church. I have no support, but I have been wandering around and searching on the web to make this impossible task happen. Therefore, I need your help in helping me built this app.

I am watching a video and trying to replicate the same commands for a desired output. I am not able to get it. I am using Ionic 3.19.0

import { Component } from ā€˜@angular/coreā€™;

import { NavController } from ā€˜ionic-angularā€™;

import { AlertController } from ā€˜ionic-angularā€™;

@Component({
selector: ā€˜page-homeā€™,
templateUrl: ā€˜home.htmlā€™
})
export class HomePage {

constructor(public navCtrl: NavController, private alertCtrl: AlertController) {

}

openTodoAlert(){
  let addTodoAlert = this.alertCtrl.create({
    title: "Add a Todo",
    message: "Enter your Todo",
    inputs: [
        {
          type: "text",
          name: "addTodoInput"      
        }
      ],
      buttons: [
        {
          text: "cancel"
        },
        {
          text: "Add Todo"
        }
      ]
  });
  
   addTodoAlert.present();

}
}

For some strange reason, the alertcontroller is not working.

Could anyone please help me?

2

Whatā€™s not working. The alert controller is not presenting?
if thatā€™s the case, I would guess it is something in your html. Your code should be showing the alert controller. Are you sure your html is set up properly?

(click)="openTodoAlert()">

Perhaps you forgot the ()?

1 Like
4



<button ion-button (Click)=ā€œOpenTodoAlert()ā€>


ā€œClickā€ was added in the correct format in html

5

Is openTodoAlert() capitalized / not capitalized in both pages?

6

And

(click)

donā€™t capitalize it

7

wow, a rookie mistake
C was capitalized
it works now

Thank you very much

1 Like
8

Yes sometimes ionic Typescript does matter, and is case sensitive, have fun with your project

9

I have the same issue, the case is correct but it turns out instead of putting the (click) event in the button I put it in the ion-icon

<button ion-button>
        <ion-icon name="add" (click)="openTodoAlert()"></ion-icon>
  </button>

it should be

<button ion-button (click)="openTodoAlert()">
        <ion-icon name="add"></ion-icon>
  </button>