Ion-alert-controller

Ionic Framework
1

Hi!
I am using Ionic 6.2.1 and I was trying to follow this Ionic tutorial but when I try to create the alarm-controller (1:54:00 in the YT video) I get this error

Uncaught TypeError: alertCtrl.create is not a function
at HTMLElement.

This is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Budget Planner</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
</head>
<body>
    <ion-app>
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>Budget planner</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-grid>
                <ion-row>
                    <ion-col size-md="6" offset-md="3"> 
                        <ion-card>
                            <ion-card-header>
                                <ion-card-title>New expense</ion-card-title>
                            </ion-card-header>
                            <ion-card-content>
                                <ion-item>
                                <ion-label position="floating">Expense Reason</ion-label>
                                <ion-input type="text" id="input-reason"></ion-input>
                                </ion-item>
                                <ion-item>
                                    <ion-label position="floating">Expense Amount</ion-label>
                                    <ion-input type="number" id="input-amount"></ion-input>
                                </ion-item>
                                <div margin-vertical class="ion-text-right ion-margin-vertical">
                                    <ion-button fill="outline" color="danger" id="btn-cancel">
                                        <ion-icon slot="start" name="close"></ion-icon>
                                        Clear
                                    </ion-button>
                                    <ion-button id="btn-confirm">
                                        <ion-icon slot="start" name="add-outline"></ion-icon>
                                        Add Expense
                                    </ion-button>
                                </div>
                            </ion-card-content>
                        </ion-card>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col size-md="6" offset-md="3"> 
                        <ion-list id="expenses-list"></ion-list>
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col size-md="6" offset-md="3"> 
                        <p class="ion-margin">Total Expenses: <span id="total-expenses"></span></p>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-content>
        <ion-alert-controller></ion-alert-controller>
    </ion-app>
    <script src="app.js"></script>
</body>
</html>

And the app.js

const reasonInput = document.querySelector('#input-reason');

const amountInput = document.querySelector('#input-amount');

const cancelBtn = document.querySelector('#btn-cancel');

const confirmBtn = document.querySelector('#btn-confirm');

const expensesList = document.querySelector('#expenses-list');

const totalExpensesOutput = document.querySelector('#total-expenses');

const alertCtrl = document.querySelector('ion-alert-controller');

let totalExpenses = 0;

const clear = () => {

    reasonInput.value = '';

    amountInput.value = '';

}

confirmBtn.addEventListener('click', () => {

    const enteredReason = reasonInput.value;

    const enteredAmount = amountInput.value;

    if (

        enteredReason.trim().length <= 0 || 

        enteredAmount <= 0 || 

        enteredAmount.trim().length <= 0

    ) {

        alertCtrl.create({

            message: 'Please enter valid reason and amount!', 

            header: 'Invalid inputs',

            buttons: ['Okay']

        }).then(alertElement => {

            alertElement.present();

        });

        return;

    }

    const newItem = document.createElement('ion-item');

    newItem.textContent = enteredReason + ': $' + enteredAmount;

    expensesList.appendChild(newItem);

    totalExpenses += +enteredAmount;

    totalExpensesOutput.textContent = totalExpenses;

    clear();

});

cancelBtn.addEventListener('click', clear);
2 
  <script type="module">
    import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/index.esm.js';
    window.alertController = alertController;
  </script>
1 Like
3

<ion-alert-controller> no longer exists in Ionic 5.

If you look at how alerts are built in the latest documentation: https://ionicframework.com/docs/api/alert#usage, with javascript tab selected, you’ll see that you can structure your alert as follows (beginning where you had alertCtrl.create())

    const alert = document.createElement('ion-alert');
    alert.header = 'Invalid inputs';
    alert.message = 'Please enter a valid reason and amount.';
    alert.buttons = ['Okay'];
    document.body.appendChild(alert);
    alert.present();
2 Likes
4

Add @aaronksaunders changes to html then make these changes to app.js

confirmBtn.addEventListener('click', handleConfirmClick);

async function handleConfirmClick() {
    const enteredReason = reasonInput.value;
    const enteredAmount = amountInput.value;

    if (enteredReason.trim().length === 0 || enteredAmount <= 0 || enteredAmount.trim().length === 0) {
        const alert =  await alertController.create({
            message: 'Please enter a valid reason and amount',
            header:  'Invalid inputs',
            buttons: ['Okay']
        });
        await alert.present();
        return;
    }
    const newItem = document.createElement('ion-item');
    newItem.textContent = enteredReason + ' : $' + enteredAmount;
    expensesList.appendChild(newItem);

    totalExpenses += +enteredAmount; 
    totalExpensesOutput.textContent = totalExpenses;

    clear();
}
5

Thanks for the reply! really helped me out :slight_smile: