Retrieving input values using alert-controller in Typescript for Ionic framework and Angular

I am working with the Ionic (angular) framework and I need to extract information from the alert-controller inputs in order to utilize them within a function. Is there a method for accomplishing this?

async presentAlertPrompt(resp) {
const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Update!',
      inputs: [
        {
          type: 'text',
          value: resp.food_name,
        },
        {
          type: 'text',
          value: resp.food_price
        },
        // multiline input.
        {
          type: 'textarea',
          value: resp.food_description
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'Ok',
          handler: () => {
            console.log('Confirm Ok');
            })
          }
        }
      ]
    });

    await alert.present();
}

Answer №1

async displayCustomAlert(resp) {
const alertBox = await this.alertController.create({
      cssClass: 'my-custom-style',
      header: 'Update Information',
      inputs: [
        {
          type: 'text',
          name: 'itemName',
          value: resp.item_name,
        },
        {
          type: 'text',
          name: 'itemPrice',
          value: resp.item_price
        },
        // multiple lines input.
        {
          type: 'textarea',
          name: 'itemDescription',
          value: resp.item_description
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: () => {
            console.log('Cancelled');
          }
        }, {
          text: 'Accept',
          handler: (value) => {
            console.log(value.itemName);
            console.log(value.itemPrice);
            console.log(value.itemDescription);

            console.log('Accepted');
            })
          }
        }
      ]
    });

    await alertBox.present();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Angular 8 Animations when loading a module lazily - Encountered Synthetic Property Error

I currently have 2 different modules in my project, namely the app.module and a lazy.module. The lazy.module is specifically designed to be lazy loaded into the main app.module through routing mechanisms. const routes: Routes = [ { path: '', lo ...

Unable to retrieve data from database using Angular 4

I am currently working with Angular 4 and using a MySQL database. This is my service: service.ts getData(){ return this.http.get('http://example/users.php').map(res=>{ return res.json(); }).catch(err=>{ return err.jso ...

What is the best method to extract the values of objects in an array that share

var data= [{tharea: "Rare Disease", value: 3405220}, {tharea: "Rare Disease", value: 1108620}, {tharea: "Rare Disease", value: 9964980}, {tharea: "Rare Disease", value: 3881360}, ...

Tips for navigating to a specific component within a single page

I'm facing an issue with scrolling to a specific component on the same page when a navbar item is clicked. Each component has a min-height of 100vh and there is a navbar at the top. I attempted using ViewPortScroller in the main component, but it does ...

How can you define a generic type alias in TypeScript for a function that is also generic?

I am facing a challenge with creating a generic alias for a typed generic function. Despite my efforts, I have not been successful in achieving this. Here is an example of what I'm encountering: // foo.tsx function foo<T>(arg: T): T { return a ...

Subscribing to a Subject property of a mocked service within an Angular unit test

During my Angular unit testing, I encountered an issue with my mocked service containing two properties: public messageChange: Subject<ChatMessage> = new Subject<ChatMessage>(); public gameChange: Subject<GameState> = new Subject<G ...

Encountering errors while attempting to utilize Ionic plugins within a nxtend/ionic-angular project

I've been trying to integrate nxtend/ionic-angular into my project, but I encountered issues with using plugins. Here are the two use cases where I faced problems: 1st Use Case: I needed to retrieve the current application version, so I installed the ...

How can we access child components in vanilla JavaScript without using ng2's @ViewChild or @ContentChild decorators?

Recently, I delved into the world of using ViewChildren and ContentChildren in Angular 2. It got me thinking - can these be implemented in ES6 without TypeScript annotations? The TypeScript syntax, according to the official documentation, looks something ...

How to pass a distinct identifier to an Angular 2 component?

Encountering an issue with Angular2 where I need to assign a unique identifier to my reusable component. Seeking assistance from the community. account.html <div class="container"> <!-- ACCOUNT INFO --> <div class="row"> ...

Blend Mode / Vue CLI / Remote server routing

I'm looking for a solution to set up a proxy in an AngularCLI/Webpack environment. The main goal is to forward requests from http://localhost:4200/rest to https://someserver.com/somepath/rest. One challenge is that the endpoint is using HTTPS instead ...

Utilizing Angular: Importing Scripts in index.html and Implementing Them in Components

Currently, I am attempting to integrate the Spotify SDK into an Angular application. While I have successfully imported the script from the CDN in index.html, I am encountering difficulties in utilizing it at the component level. It seems like there may be ...

Shifting successive elements in an array alternates

I have been working on a pick list component and have come up with the following layout https://i.stack.imgur.com/TnHAp.gif Whenever I try to move consecutive items, it keeps toggling between those two Here's a snippet of my code: moveDown(){ ...

Having trouble incorporating a bootstrap template into my Angular project: Whenever I add the styling files, the application ceases to function

I'm currently working on incorporating a Bootstrap template into my Angular project, which already utilizes Bootstrap. Check out my Angular project https://i.sstatic.net/SKzRk.png. Now, I'm focusing on integrating the "Ethereal" scrolling templa ...

The unusual behavior stemming from utilizing ngFor on a select input in Angular

My select input should be simple, but I'm encountering an issue. It uses ngFor to get the values for the option tags and also [selected] to set the input value based on user selection. The Behavior: When I click on the dropdown, it flashes as if it& ...

What is the best way to separate the user interface module from the logic in Angular2?

I am diving into Angular2 for the first time and have been tasked with creating a module using UI components like @angular/material. The goal is to shield my team members from the complexities of the UI framework I choose, allowing them to focus solely on ...

What is the correct way to link an array with ngModel using ngFor loop in Angular?

Utilizing ngModel within an ngFor iteration to extract values from a single input field like this : <mat-card class="hours" > <table id="customers"> <thead > <th >Project</th> ...

Issue with iOS 10: Changes to class not reflected in CSS/styles

Currently, I am utilizing Ionic with Angular to develop an application for Android and iOS. Surprisingly, everything functions smoothly on Android, but there seems to be an issue with iOS. I am employing a class change on an element using ng-class. I can ...

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

I'm struggling with the code in my component, which looks like this: @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: string = "alert" @HostBindi ...

ASP.NET 5 controller's action not binding correctly with Angular2 Http post request

When sending a post request from Angular2 to an ASP.NET 5 controller action, although the data is being posted correctly and the controller action is being reached, the parameters defined in the controller action are not being properly mapped as they are s ...

Unveiling the magic: Dynamically displaying or concealing fields in Angular Reactive forms based on conditions

In my current scenario, there are three types of users: 1. Admin with 3 fields: email, firstname, lastname. 2. Employee with 4 fields: email, firstname, lastname, contact. 3. Front Office with 5 fields: email, firstname, lastname, airline details, vendo ...