Ionic 7 Angular Image Picker Integration Tutorial
Ionic Image Picker tutorial; In this comprehensive guide, you will learn how to integrate image picker functionality in an Ionic Angular app using Cordova Telerik image picker and ionic native image-pickers plugins.
The image picker is a module that gives access to the device UI for selecting images or videos from the device storage.
Ideally, this extensive guide will explain how to add an image picker in Ionic for selecting an image using Cordova and ionic native plugins.
We will also make sure you can spruce up the selected image in the Ionic app by easily customizing its height, width, quality, and a total number of selected images.
Additionally, once you picked the image, then you will also be able to show it on the Ionic page view.
How to Implement Image Picker in Ionic Angular App
- Step 1: Install Ionic App
- Step 2: Install Image Pickers Plugins
- Step 3: Add Image Picker Modules in App Module
- Step 4: Integrate Image Picker in Ionic
- Step 5: Add Custom Styling
- Step 6: Test Ionic Project
Install Ionic App
The first step begins with installing and setting up the Ionic CLI tool, execute the command to install the tool:
sudo npm install -g @ionic/cli
Now, again type the recommended command in the terminal to install a blank new Ionic Angular app:
ionic start ionic-demo-app blank --type=angular
Move inside the application:
cd ionic-demo-app
Disable Strict Type Errors
To avoid TypeScript compiling issues, we just need to open tsconfig.json file:
First, set below property under “compilerOptions” property.
"compilerOptions": {
"strictPropertyInitialization": false,
"skipLibCheck": true
...
}
Secondly, add given props under “angularCompilerOptions”.
"angularCompilerOptions": {
"strictTemplates": false,
...
}
Install Image Pickers Plugins
In this step, we will install Cordova and Ionic native image picker plugins.
The Cordova Telerik is an amazing image picker plugin; this also lets you create multiple image selection functionality in the Ionic platform.
Execute command to install the packages.
npm i cordova-plugin-telerik-imagepicker --legacy-peer-deps
npm install @ionic-native/image-picker --legacy-peer-deps
Add Image Picker Modules in App Module
Further, you need to import the ImagePicker module from the ‘@ionic-native/image-picker/ngx’ package, plus inject it into the providers’ array as shown below in the app.module.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// Import plugin
import { ImagePicker } from '@ionic-native/image-picker/ngx';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
ImagePicker,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
],
bootstrap: [AppComponent],
})
export class AppModule {}
Integrate Image Picker in Ionic Angular
The ImagePicker module provides getPictures()
method that invokes an image picker; after selecting the images, we add the images in Base64 form into the array.
Open the home.page.ts file and update the following code:
Create a button bind imagePicker()
method with the click event. When a user clicks on it, it will open the image picker and allows you to choose the images.
The ngFor
directive iterate over the images collection and show the image preview in the Ionic Angular app.
Head over to home.page.html file and insert the suggested code:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic Image Picker Integration Demo
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-grid>
<ion-row>
<ion-col text-center>
<ion-button (click)="imagePicker()">Select Images</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div class="images-wrapper">
<div class="pick-single-image" *ngFor="let image of imgRes">
<img src="{{image}}" alt="" srcset="">
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Add Custom Styling
Let us style the selected images, here is the styling code that you have to add it inside the home.page.scss file:
.image-container {
background-size: cover;
min-height: 220px;
}
@media (min-width: 0px) {
.images-wrapper {
column-count: 2;
}
}
@media (min-width: 420px) {
.images-wrapper {
column-count: 3;
}
}
@media (min-width: 720px) {
.images-wrapper {
column-count: 3;
}
}
.pick-single-image {
margin: 4px;
}
Test Ionic Project
Run the below command to add the native core package.
npm install @ionic-native/core --legacy-peer-deps
Lastly, we are left with testing out the feature we created; hence execute either of the commands to add the platform of your choice:
# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android
# Windows
ionic cordova platform add windows
Once the platform has added, now you need to create the build, hence execute the command from the terminal.
Or, to make things simpler, you can start your demo app by connecting your mobile device via USB.
# iOS
ionic cordova build ios
# Android
ionic cordova build android
# Windows
ionic cordova build windows
Eventually, you may execute either of the commands to start the app on the device; likewise, you can debug in the Chrome browser as well.
# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l
# Windows
ionic cordova run windows -l
Conclusion
So, this was it. The Ionic multiple image selection tutorial is over.
Throughout this tutorial, you have ascertained how to create a reusable image picker component in an Ionic application using Ionic Native Cordova plugins.
Also, how to pick single or multiple images using image picker component.