Alertcontroller Not Working


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’;

selector: ‘page-home’,
templateUrl: ‘home.html’
export class HomePage {

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


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


For some strange reason, the alertcontroller is not working.

Could anyone please help me?

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?


Perhaps you forgot the ()?


<button ion-button (Click)=“OpenTodoAlert()”>

“Click” was added in the correct format in html

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



don’t capitalize it

wow, a rookie mistake
C was capitalized
it works now

Thank you very much

1 Like

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

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>

it should be

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