Triggering actionsheet button clicks in Ionic 3

I need assistance with adding buttonClick functionality to actionSheet buttons in ionic 3. When a button is clicked, I want to open a modal (custom alert). Below is the code snippet: 

    openActionSheet() {
      console.log('opening');
     let actionsheet = this.actionSheetCtrl.create({

     title:"Assign a status to the Request",

     cssClass:'action-sheet-css',
     buttons:[{
     text: 'Collect Documents',
     icon: !this.platform.is('ios') ? 'cog' : null,
      handler: () => {
      }
     },{
     text: 'Reschedule',
      icon: !this.platform.is('ios') ? 'cog' : null,

     handler: function(){
       console.log("reschedule click");
     }
     },{
     text: 'Contact Error',
      icon: !this.platform.is('ios') ? 'cog' : null,
     handler: function(){
     }
     },{
     text: 'Customer Denied',
      icon: !this.platform.is('ios') ? 'cog' : null,
     handler: function(){
     }

    }]

     });
     actionsheet.present();

    }
angulartypescriptionic3

Answer №1

To incorporate an additional button item into the array above, follow these steps:

 buttons: [
     {
         text: 'Add',
         handler: () => {
           openModal();
         }
       },
       {
         text: 'Edit',
         handler: () => {
           editItem();
         }
       }
   ]

Next, create a separate method for initiating a modal popup:

 openModal(){

 }

Please note: It's recommended to use arrow functions for handlers instead of traditional function expressions like handler: function(){}, as illustrated in the example above.

Answer №2

Pressing an Actionsheet button to open a model controller page

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Action Sheet
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="actionSheet()">ActionSheet</button> 
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, ActionSheetController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    private actionSheetController: ActionSheetController,
    private modelController: ModalController) {

  }
  actionSheet(){
    let actSheet = this.actionSheetController.create({
      title:'Open modal',
      buttons:[
        {
          text:'Archive',
          handler: ()=>{
            this.openModel();
          }
        }
      ]
    });
    actSheet.present();
  }
  openModel(){
    let model = this.modelController.create('ModelPage');
    model.present()
  }

}

To specify the page within the model controller string, use this.modelController.create('modelPage').

This code functions flawlessly.

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

Keeping the Angular Material sidenav constantly expanded on desktop screens

I just started learning Angular and I'm attempting to implement the sidenar component from Angular Material (current version). Here is the code snippet inside the main-nav component: <mat-sidenav-container class="sidenav-container" autosize> ...

angularangular-material

Encounter issue with async function in produce using Immer

Having an issue while attempting to create an asynchronous produce with immer. When calling the async function, this error is encountered: Below is my code snippet: import { combineReducers, createStore } from 'redux'; import produce from ' ...

javascripttypescriptreduxreact-reduximmer.js

What is the reason TypeScript struggles to automatically deduce assignments of identical object types?

Imagine a scenario with a simple code snippet to illustrate the issue: interface I { n?: number; s?: string; } const a: I = { n: 1, } const b: I = { n: 2, s: 'b', } const props = ['n', 's'] as const; for (const p ...

typescript

Discovering the tab index of a tab header in Angular 4 Material

In my Angular application, I am using a mat-tab component to display tabs dynamically generated from an array. The template looks something like this: <mat-tab-group> <mat-tab *ngFor="let tb of dynTabs"> ...

angularmaterial-designangular-material2

Do I really need to install @angular/router as a dependency in Angular CLI even if I don't plan on using it?

After creating a new Angular CLI project, I noticed that certain dependencies in the package.json file seemed unnecessary. I wanted to remove them along with FormModules and HttpModules from imports: @angular/forms": "^4.0.0", @angular/http": "^4.0.0", @a ...

angularangular-cli

Access the child component within an @ChildComponent directive in Angular

Is it possible to retrieve child components of another component? For instance, consider the following QueryList: @ContentChildren(SysColumn) syscolumns: QueryList<SysColumn>; This QueryList will contain all instances of the SysColumns class, which ...

javascriptangulartypescriptcomponentschildren

Utilizing Typescript to inject dependencies and receive arguments within a class

I am currently using InversifyJS with the container. My goal is to inject the templateEngine and provide args (such as host, port, etc...) in the constructor. const container = new Container(); container.bind<MailerInterface>(TYPES.Mailer).to(NodeM ...

typescriptinjectinversifyjs

What is the most effective way to send messages from Typescript to C#?

Could someone provide guidance on how to properly send a message from Typescript to C#? I have been attempting to receive the message in C# using WebView_WebMessageReceived with the code snippet below: private void WebView_WebMessageReceived(object sender, ...

c#typescriptpostmessage

Having trouble uploading SharePoint list item with attachment from Angular to ASP.NET Core Web API via NgModel

Recently, I successfully added a SharePoint list item with an attachment from Angular to ASP.NET Core Web API. This was achieved using FormControl in the Angular application. I found guidance on how to upload files from Angular to ASP.NET Core Web API at ...

angularapi.net-coresharepointattachment

cssclassName={ validatorState === RIGHT ? 'valid' : 'invalid' }

Is there a way to dynamically add different classes based on validation outcomes in React? My current implementation looks like this: className={ validatorState === RIGHT ? 'ok' : 'no' } However, I also need to handle cases where the ...

javascriptreactjstypescript

Focusing on an input element in Angular2+

How do I set focus on an input element? Not with AngularDart, but similar to the approach shown in this question: <input type="text" [(ngModel)]="title" [focus] /> //or <input type="text" [(ngModel)]="title" autofocus /> Does Angular2 provi ...

angulartypescript

Exploring the concept of type inheritance in TypeScript

I am working on developing various components for an app, each with its own specific structure. The general structure is defined as COMPONENT. Within this framework, there are two distinct components: HEADING and TEXT. These components should be subclasses ...

typescript

Challenges of implementing dark mode with a checkbox and local storage

I'm experiencing an issue with local storage. When I enable the dark mode, everything functions properly and the local storage 'dark' is set to true. However, upon refreshing the page, the local storage remains true but the toggle switches b ...

angulartypescript

Running lint-staged on an Angular monorepo

I am facing challenges while setting up lint-staged in my Angular monorepo workspace. Despite multiple attempts, I have been unsuccessful in making it work properly. When the command ng lint --files is executed with a changed file, an error stating that *f ...

angularlint-staged

Converting TypeScript query string values into GUIDs

I'm currently working on a project that requires me to retrieve a string value (GUID) and convert it into a GUID. The query string format is already in GUID, but when getting the value from the query string using AngularJS and TypeScript, it returns ...

angulartypescript

No control access origin header found on the request to Spring 5 WebFlux functional endpoints

I have scoured numerous resources in search of the perfect solution to my issue. In my opinion, I believe I have all the necessary components in place but I am unable to pinpoint where the problem lies. Utilizing spring 5 with WebFlux and functional endpo ...

springangularvue.jsspring-securitycors

What is the process of implementing a particular FormControl from a FormArray in my HTML file?

My FormArray initialization code is as follows: this.contents.forEach(content=> { this.formArray.push( new FormControl(content.text, Validators.required)); }); Now, I am trying to associate a specific FormControl with my textarea by using i ...

htmlangularformstypescript

typescript React-Redux challenge: Boosting Your mapDispatchToProps Skills

I'm having trouble determining the type of my mapDispatchToProps function in the SignInComponent. See the code snippet below: Here is my authAction.ts file: import firebase from 'firebase/app' import { Dispatch } from 'react'; ty ...

reactjstypescriptreact-reduxmapdispatchtoprops

What is the reason TypeScript does not recognize the type when dealing with promises?

I am encountering an unexpected behavior where there is no error even though there should be one in TypeScript when using promises. I assigned a number value to a string variable, but surprisingly, no error was thrown. Why does this happen? https://codesa ...

typescripttypes

I prefer to conceal the permission-wrapper component tag in the DOM when using Angular

Looking to hide the permission-wrapper component tag from appearing in the DOM. CRUCIAL: The component itself should conceal the component's tag (such as ), and instead display the template's content when necessary. For example, let's crea ...

angular