Repository: Ionic Github Repository
Software Requirements:
Visual Studio Code(Or any preferred code editor),
npm, ionic.
What you will learn:
In this tutorial you would learn about how to manage your ionic/Electron app on whatever platform you choose to target covering these major concepts
In this tutorial i would be going through a unique and easy method of implementing the press and hold feature for multiple select. If you're familiar with ionic 4 you would know that the press and hold feature has been removed meaning that they remove hammer.js from the starter packages to reduce download size and also apk size. Fear not, implementing this is relatively easy and i'm going to show you how to do something really awesome with it.
The idea of this tutorial is letting you implement this effect that you can see in galleries of touch and hold to select multiple items
Image Source
So lets get to it
Firstly we would need to use press events and as i stated earlier that isn't included in ionic 4 so you would need to install it.
Start up a new project as usual
ionic start myPressApp blank
And after this is done you can then install hammer.js with npm
npm install hammer.js --save//Save flag used to save it as a dependency
Hammer.js is in your project but cant be used yet, you would need to add it to the app modules in you main.ts file.
Import the file import it into your main.ts file like this
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';//Imported here
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
You would then add a dummy array that we would be using to test this feauture like this on the home.pagets
myArray = ['Item1','Item2','Item3','Item4','Item5','Item6']
And add this template to the homepage.html
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let item of myArray; let i = index" (press)="onHold($event,item)" (click)="onClick($event,item)">
<h2>{{ item }}</h2>
</ion-item>
<div class="nothing" *ngIf="myArray.length < 1">
<h2>
Nothing Here
</h2>
</div>
</ion-list>
</ion-content>
Now to test if this works you could run
ionic s //For the development server
And your app will load in your browser like this
To implement the multiple select feature we would need to do equal work in our template and logic files. We would start by using a dummy list of buttons which we can click use to test this feature. So to do that you could use this within your home page as the template.
To test that the press events are working you could simply log events to your console and test the press events in your browser
onPress(){
console.log('Press event works')
}
Now to the logic
We would need to handle press events on the initial contact for multiple select and simple click events after that so that the user wouldn't need to hold down on all elements after this. So this would involve both press and click events. The logic for both would look like this
//This handles hold events for intitial contact
onHold(event, item) {
console.log('Held')
console.log('event', event, 'item', item);
const name = item.name;
if (this.highlight[name]) {//Check if the item is already highlighted
this.highlight[name] = false;
const element = (event.target).closest('ion-item');
this.renderer.setStyle(element, 'color', '');
const index = this.selected.indexOf(item);
this.selected.splice(index, 1);
}
else {
this.highlight[name] = true;
const element = (event.target).closest('ion-item');
this.renderer.setStyle(element, 'color', '#FF7F50')
this.selected.push(item);
}
console.log(this.selected);
}
//This handles click events after the multiple select feature has been initialized
onClick(event, item) {
//These events happen when the user has already started the multiple select process with the hold feauture
if (this.selected.indexOf(item) > -1) {
const name = item.name;
if (this.highlight[name]) {
this.highlight[name] = false;
const element = (event.target).closest('ion-item');
this.renderer.setStyle(element, 'color', '');
const index = this.selected.indexOf(item);
this.selected.splice(index, 1);
}
else {
this.highlight[name] = true;
const element = (event.target).closest('ion-item');
this.renderer.setStyle(element, 'color', '#FF7F50')
this.selected.push(item);
}
}
else if (this.selected.length > 0 && this.selected.indexOf(item) === -1) {
console.log('This is the second possibility')
const name = item.name;
this.highlight[name] = true;
const element = (event.target).closest('ion-item');//Change the color of the item being selected using renderer and change it back when it is unselected
this.renderer.setStyle(element, 'color', '#FF7F50')
this.selected.push(item);
}
}
}
As you see in the code above we are using an object to set the selected objects and whenever they are pressed. Also i am using a simple icon with a badge at the top to know the length of the selected items and to give the user a better idea of what he is doing. I did that by simply adding a badge with the length of the selected array.
This was done like this
<ion-buttons slot='end'>
<ion-button><ion-icon name='trash'><ion-badge>{{ this.selected.length }}</ion-badge></ion-icon></ion-button>
</ion-buttons>
With this you can modify your list to be whatever you want and also change the highlight color.
This is how it works
Of course you can change your styling for this but the functionality is completely usable and effective.
You can start up a new starter project with this by simply cloning this repo for a starter template. Simple clone the repo using
git clone https://github.com/yalzeee/Ionic-4-Press-and-Hold-Gallery
then you could install all dependecies for a starter project of ionic4 with the effect enabled
Thanks for reading
Repository Here
Thanks for reading.