What is the best way to enable swipe functionality for ion-items in Ionic without requiring a click?

I have been working on implementing an ion-list with swipable ion-items that do not need to be clicked on the side to trigger an event.

The functionality I am aiming for is similar to the default contacts app on Samsung phones, where a left swipe calls and a right swipe sends an SMS.

This is how the list appears in the parent page:

<ion-list *ngFor="let person of persons | filter:searchTerm">
   <app-person-entry [person]="person" (click)="openModal(person)"></app-person-entry>
</ion-list>

This is what the person-entry component looks like:

<ion-item>
  <ion-avatar slot="start">
    <img src={{person.icon}}>
  </ion-avatar>
  <div>
    <div class="container">
      <ion-label>{{person.lastname}}</ion-label>
      <ion-label>{{person.firstname}}</ion-label>
    </div>
    <div class="container">
      <ion-label>{{person.postalCode}}</ion-label>
      <ion-label>{{person.city}}</ion-label>
      <ion-label>{{person.address}}</ion-label>
    </div>
  </div>
</ion-item>

Answer №1

To implement sliding items, you can utilize the ion-item-sliding component. For example:

<ion-list>
    <ion-item-group #myItemsId>
      <ion-item-sliding (ionSwipe)="swipeEvent($event, myItemsId)">
        <ion-item-options side="start">
          <ion-item-option>CALL</ion-item-option>
        </ion-item-options>

        <ion-item>
          <ion-label>Item Options</ion-label>
        </ion-item>


        <ion-item-options side="end">
          <ion-item-option>SMS</ion-item-option>
        </ion-item-options>

      </ion-item-sliding>
    </ion-item-group>
  </ion-list>

In corresponding .ts file:

swipeEvent($event, item) {
    console.log($event)
    if ($event.detail.side == 'start') {
      console.log('call now');
      this.closeAllItems(item)
    } else {
      console.log('SMS now');
      this.closeAllItems(item)
    }
  }

  closeAllItems(item) {
    let a = Array.prototype.slice.call(item.el.children)
    a.map((val) => {
      val.close();
    })
  }

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

Combining SignalR and Angular: Steps for incorporating a Bearer token into Http Headers

Recently, I developed an asp.net core 2.0 SignalR Hub that utilizes a Bearer Token for Authentication. However, I am encountering some confusion when trying to establish a connection with the SignalR Angular 5 client. Interestingly, the connection succeeds ...

When attempting to send a fetch request in the most recent rendition of NextJS, it ends up with an error of 'failed fetch'

I am currently working on a nextjs (v.13.4.19) / strapi (v.4.12.5) application and facing issues when trying to make a request to the strapi endpoint using the fetch function. I have attempted several troubleshooting steps such as: changing localhost:1337 ...

What are the issues with this straightforward joining of strings?

Trying to merge multiple lines of text in a file using Node.js but experiencing unexpected results. It seems like the previous line is being overwritten, and I'm not sure why. Merging 'Line' with its subsequent 'Sub' items on th ...

angular pagination directive malfunctioning

I have developed a custom directive for pagination that is compatible with grids throughout my website. On this particular page, there is a search feature that retrieves new data, and I am looking to update the pagination within my directive with this new ...

"Error alert: The specified property 'Iscontains' cannot be read because it is undefined" appears in the script for this video

I am currently utilizing AJAX to interact with my backend code. I retrieve URLs from the database and then render them onto the DOM, displaying videos accordingly. However, I am encountering an issue where Uncaught TypeError: Cannot read property ' ...

filtering the properties of mongoose documents

I have created a schema as shown below: var UserSchema = new Schema({ firstName: { type: String, required: true }, lastName: { type: String, required: true }, email: { type: String, required: true }, location: { type: String, required: true }, p ...

Encountering an error with loading %5Bobject%20Object%5D on a webpack-generated JavaScript file hosted in an express server because of Stylus styles

I have been experimenting with enhancing the example linked here. Initially, everything worked smoothly when I used npm start. However, I wanted to integrate it into an existing ExpressJS project. To achieve this quickly, I copied the three js files to the ...

Navigating through a HTML email Listserv with a click event scrolling feature

I am looking to create an interactive HTML email with a link that can scroll the recipient's browser to a specific section within the email. I am considering using Javascript and jQuery for this functionality. Can someone guide me on how to implement ...

I'm struggling to understand how to use rxjs 6 in conjunction with angular 6, specifically when it comes to utilizing interval

I'm struggling to update my rxjs code to version 6. Previously, I had the following code that would poll for new data every 5 seconds: import { Observable, interval } from 'rxjs'; import { switchMap, map } from 'rxjs/operators'; ...

Issue with Angular2 where stylesheets are not loading properly

In my various angular 2 components, I include my stylesheets in the following manner: @Component({ selector: 'rewards-component', styleUrls: [ '../../assets/styles/old-web-styles/old-web-styles.component.scss', ...

What is the best way to retrieve a linked filter in Vue from another?

I have created a file to store filters linked to my Vue object, and it is being imported into my App.js. One of the filters I have needs to use another filter: Vue.filter('formatDateTime', value => { if (value) return moment(String(value ...

Is it possible to use Harvest's Chosen alongside the Python Pyramid Framework?

Is it possible to set up npm to install chosen on a Linux server running Fedora in Amazon's AWS service? If not, are there any alternatives available? I'm currently using a python framework and wondering if it's safe to install node.js on t ...

Issue with Angular Filters: Difficulty Arises When Search Box is Cleared

I have a list of objects that I am displaying, and I added a search box to filter a column. When I enter a value, the data is filtered correctly. However, when I clear the search box, I do not get all the data back; I remain stuck with the initially search ...

Using Javascript to retrieve information from a json file

I am currently working on incorporating JSON data into my script. I have noticed that when I manually declare a variable and check the console output, everything seems to work fine. <script> data = '[{"id": 1,"name": "Germany"},{"id": 2,"name": ...

I'm facing an issue in my Angular project where Typescript is unable to locate @types/spotify-api

I recently added @types/spotify-api to my project and updated my tsconfig.json file as follows: "typeRoots": [ "node_modules/@types" ], "types": [ "spotify-api" ], However, I am encountering issues with Typescript not being able to find PlaylistTrack ...

Contrasting $window.location.reload() and $route.reload() functions in AngularJS

Could someone clarify the distinction between $window.location.reload() and $route.reload() in Angular.js? Although I have implemented both methods, I have noticed they achieve similar outcomes. Would someone be able to provide an explanation of the vari ...

Convert former function to use async and await system

I need to convert this function to async, but I am facing an issue where the users object obtained from mapping interactions is not returning data in the expected format. When I run the async function on the client side, my values are showing up as nil. Th ...

How exactly does the 'this' type in TypeScript determine its own type inferences?

When working with TypeScript, I wanted to use the this keyword to type certain properties of my class. However, I encountered a problem that I couldn't figure out how to solve. What I was trying to achieve is something like this: export class Animal{ ...

Attempting to locate the following div element using a particular class name, however, I consistently retrieve the final one

I have a magician and I'm attempting to design a progress bar. The current step that the user is on should be purple and should advance as the user moves through the form. However, when trying to proceed to the next step, the progress bar incorrectly ...

Tips for customizing the list of components and attributes for each component in the Angular Form.io builder

I have successfully integrated form.io with Angular 10. After creating a demo project using form.io in the Angular CLI, I was able to develop a custom component and customize the editForm for it. import { Injector } from '@angular/core'; import ...