Implement Multi Select feature (Long press/Hold and select) in Ionic

Question

I am working on an Ionic project having a list. I want a multi-select feature just like the hold and select feature in android gallery, so that upon long press checkboxes appear in front of list items, enabling me to select more than one item.

Any suggestions on how to implement that? I am not looking for GalleryView feature but just long press and select feature, just like it.

Is it possible without creating actual checkboxes? Or do I need to create checkboxes and implement the on-hold event?

Note: For those who are confusing whether I want to implement android gallery feature, please pay attention! I DO NOT want to implement android gallery feature here. I only want to implement a MULTI-SELECT feature on simple list in the same way we select multiple images on long press in android gallery, or even take an example of selecting multiple contacts in contact list, etc.

No that's not what I meant, I only need a multi select feature as in android gallery. — Dhruv Singhal, May 05 '18 at 08:06
See https://stackoverflow.com/questions/19585815/select-multiple-images-from-android-gallery . Its for java. — ADM, May 05 '18 at 08:26
Some brief explanation please on what it does regarding to the question... I haven't tried it before — Dhruv Singhal, May 05 '18 at 09:23
@ShreyasPednekar filechooser does not do anything related to what my question demands. Please suggest something apt. — Dhruv Singhal, May 05 '18 at 13:34

Ashutosh Sagar · Accepted Answer · 2020-05-02T05:40:56.903

1

Try this -

<ion-header>
<ion-navbar color="primary">
<ion-title>Notifications</ion-title>
<ion-buttons end *ngIf=selection>
  <button ion-button tappable (click)=disableSelect()>
    <ion-icon name="close" style="zoom:1.5;"></ion-icon>
  </button>
  </ion-buttons>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <div *ngFor="let notification of notifications; let i=index" tappable text-wrap (click)=!selection?toggleGroup(i):selectItem(i,notification)
 (press)=selectItem(i,notification) [ngStyle]="{'background-color': notification.isSelected ? '#f2f2f2' : '#ffffff'}">
 </div>
</ion-content>

And for the typescript

export class NotificationPage {
notifications = new Array<Notification>();
selection: boolean = false;

constructor() {}

public selectItem(index: number, notification: Notification) {
   this.selection = true;
   notification.isSelected = !notification.isSelected;
   this.notifications[index] = notification;
 }

public unselectAll() {
   this.selection = false;
   this.notifications.forEach(notification => {
     notification.isSelected = false;
   });
  }
}

I use two variables, first one is in the model class named isSelected. Its purpose is to determine whether a particular item is selected or not. Also, the item styling is done using [NgStyle] based on the same flag. And second is in the page itself named selected. Its purpose is to make necessary changes in UI after selecting an item.

edited May 02 '20 at 05:40

answered Jul 02 '18 at 05:18

Ashutosh Sagar

981
8
20

I will try this, in the meanwhile can you give a brief explanation for your logic behind the code. It would be helpful if I first examine it then use it. If possible please provide the logic in your answer. Thanks – Dhruv Singhal Jul 02 '18 at 05:22
I've added some explanation please do check it out. – Ashutosh Sagar Jul 02 '18 at 05:28
Will check it out shortly. Thanks – Dhruv Singhal Jul 02 '18 at 05:43
Would be nice if I get to check the key parts related to my question. It is not easy to figure out the way to do what I require by looking at the whole code. – Dhruv Singhal Jul 02 '18 at 08:17
I've shortened my answer, please check. Now this time only the necessary terms are there. – Ashutosh Sagar Jul 02 '18 at 08:55
Do you have a working link to test this? I believe I have already made something like this, but what I require does not seem to be fulfilled. Please let me test the full code if you have a link for this... If it works in the way I require, I will accept the answer. – Dhruv Singhal Jul 03 '18 at 16:31
Ok so I tried... I think _tappable_ does the job. Very thanks. – Dhruv Singhal Jul 04 '18 at 02:21

Implement Multi Select feature (Long press/Hold and select) in Ionic

1 Answers1