How to create multiple alerts on the same Tab?

Ionic Framework Ionic Angular
1

I have a Tab with many alerts, but whenever I create the second, the alert function is duplicated. Help me!

2

What does this mean?

4

When I create the first alert, I use the “presentAlert ()” function. When I create the second alert on the same Tab, I receive a notification: “Function ‘presentAlert ()’ is duplicated.” Is it possible to create more than one Alert on the same Tab?

5

Where is that presentAlert() Function from?

Aren’t we talking about an Ionic Alert?

6

yea! It’s about ionic alert. I created an ionic buttons on the Html page and on the TS page I copied and pasted the command described on https://ionicframework.com/docs/api/alert for Usage/Angular. Like this:

constructor(public alertController: AlertController) {}

  async  presentAlert() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'First step',
      message: 'Open your browser.',
      buttons: ['OK']
    });

    await alert.present();
  }
,,,

When I create the second alert, Header: "Second step", I use the same command, but a notification appears and states that the constructor is duplicated and the "presentAlert ()" function too! Like this:


constructor(public alertController: AlertController) {}

**First Alert**  async  presentAlert() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'First step',
      message: 'Open your browser.',
      buttons: ['OK']
    });

    await alert.present();
**Second Alert** async  presentAlert() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Second step',
      message: 'Read the text',
      buttons: ['OK']
    });

    await alert.present();

  }
,,,

The buttons on the Html page are connected to the TS page by the "presentAlert ()" function. Like this:


<ion-button (click)=“presentAlert()”>First Step</ion-button>

That way, I get a notification in VScode stating that the function “presentAlert” is duplicated and the constructor too. I don't know what to do because I need more than one alert of the same category. Can you help me?
7

Think about it from the JavaScript engine’s perspective: how is it supposed to know which of the two functions you wish to call if you have given them the exact same name?

8

Is it possible to create an alert function with different names? Can you help me?

9

I think this would be a more productive conversation if you back up and describe what you’re actually attempting to do.

To answer your direct question, of course you can create as many functions as you like and name them whatever you wish. There is no such inherent thing as “an alert function”.

I’m worried, though. Tabs and alerts are both extremely popular with newcomers to web app development, and also very easy to misuse. I suspect that in the final analysis, you’ll end up wanting to use neither one of them at all.

1 Like
10

In fact, after seeing your answer, I realized that I’m having trouble creating a module. I have many buttons with an alert function. But only one module is accepted “showAlert”.
When I create a new module for the next button, I get this message: “Identifier ‘openAlertII()’ is not defined. The component declaration, template variable declarations, and element referencs do not contain such a member ng’.

How can I connect my button to the alert function for a new module?

11

No, that isn’t it either. Please forget about all the technical jargon and describe in human terms something like:

The first time a user opens my app, I want to guide them through a setup process that consists of the following steps: A, B, and then C.

1 Like
12

The first time the user opens my app, I want it to have a page with 10 alerts. I managed to solve my problem with the method, but I find it difficult to organize more than one alert on my TSpage.

I did something like that; does not report errors, but the second alert does not open:

TSpage-

import { Component } from ‘@angular/core’;

import { AlertController } from ‘@ionic/angular’;

@Component({

selector: ‘app-tab1’,

templateUrl: ‘tab1.page.html’,

styleUrls: [‘tab1.page.scss’]

})

export class Tab1Page {

constructor(public alert: AlertController) {}

async AlertOne(){

const alert = await this.alert.create({

  cssClass: 'string',

  header: 'Name1',

  message:'Example1',

  buttons: ['OK']

});

await alert.present();

}

}

export class tab1Page {

constructor(public alertI: AlertController) {}

async AlertTwo() {

const alert = await this.alertI.create({

  cssClass: 'string',

  header: 'Name2',

  message: 'Example2',

  buttons: ['Ok']

});

await alert.present();

}

}

13

Sorry, but I officially give up. I can’t seem to break through the communication wall here and get you to explain your goal in business terms. Think of this as a user. Alerts are jarring and disruptive. Would you get through more than two or three of them before binning the app, let alone 10?

14

Okay, anyway, thank you very much for trying to help me. If you know how to compile more than 1 alert on the TS page, please tell me the way. My alerts are list of buttons whit information

15

100 alerts in a row. Plse post Youtube video of result :slight_smile:

1 Like
16

Then the question I would ask is:

How do I present one of 10 pieces of information to a user?

…and I would suggest using an accordion component, like Angular Material’s expansion panel, as opposed to 10 alerts.

1 Like
17

Thank you very much! I didn’t know this component, it will help me a lot and save time. Thanks for your patience, I’m starting now at Ionic.

1 Like