Multi tool use

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

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.

1 Answer
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: Array<NotificationPojo> = new Array<NotificationPojo>();
selection: boolean = false;

constructor(
public navParams: NavParams,
private alertCtrl: AlertController
) {}

public selectItem(index: number, notification: NotificationPojo) {
// alert ("INsiede item selection");
this.selection = true;
notification.isSelected = notification.isSelected ? false : true;
this.notifications[index] = notification;
}

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


The above logic works like I've taken a flag that will let me know whether the selection is started or not. For the particular item, select I've added a variable to the page of the item which will determine whether a particular item is selected or not. And to display whether a item is selected or not I've user [NgStyle] on item press. In Ionic Press means Tap and Hold.

[NgStyle]

press

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.