In this article, we’ll learn how to use multiple image picker using ionic. We are going to use / for picking up images from your android & ios photo gallery. It contains following steps

Step 1: Create new ionic project & Change your working directory

ionic start imagePicker blank
cd imagePicker

Step 2: Add required platform

ionic cordova platform add android
ionic cordova platform add ios

Step 3: Add Image Picker Plugin & npm modules

ionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="App wants to access your gallery"
npm install --save @ionic-native/image-picker


Step 4: Once we have added our npm modules and dependencies, we have to import & declare our plugin into app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { ImagePicker } from '@ionic-native/image-picker';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}


Step 5: Creating a button to access gallery & I have created a div tag to render images which we retrieved from gallery (home.html)

<ion-content padding>
 <button ion-button (click)="getPictures()">Get Pictures</button>
 <div *ngFor="let image of images">
 <img src="{{image}}"/>

Step 6: Now, we have to create a  getPictures() function into home.ts

    }).then( results =>{
      for(let i=0; i < results.length;i++){
Please login to download source code Login Here

Common mistakes

  • This won’t work on browser, you must test it on simulator / real device
  • You must give a proper permission to access; (Phone Settings => Apps => your app name => Permission & Enable all required permissions)

Hope you enjoyed this tutorial..! Could you able to success with this lesson? or facing any issue? let me know on comment. I’m waiting for your reply.

Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.