Ionic Tutorials

Ionic 6 Angular Image Picker Integration Tutorial

Ionic 6 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 6 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:

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

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.

ionic cordova plugin add cordova-plugin-telerik-imagepicker

npm install @ionic-native/image-picker

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';

  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    { 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 file and update the following code:

import { Component } from '@angular/core';
import { ImagePicker } from '@ionic-native/image-picker/ngx';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],

export class HomePage {

  imgRes: any;
  options: any;

  constructor(private imgPicker: ImagePicker) { }

  imagePicker() {
    this.options = {
      width: 200,
      quality: 30,
      outputType: 1
    this.imgRes = [];

    this.imgPicker.getPictures(this.options).then((results) => {
      for (var i = 0; i < results.length; i++) {
        this.imgRes.push('data:image/jpeg;base64,' + results[i]);
    }, (error) => {


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 file and insert the suggested code:

<ion-header [translucent]="true">
      Ionic Image Picker Integration Demo  

<ion-content [fullscreen]="true">
      <ion-col text-center>
        <ion-button (click)="imagePicker()">Select Images</ion-button>
        <div class="images-wrapper">
          <div class="pick-single-image" *ngFor="let image of imgRes">
            <img src="{{image}}" alt="" srcset="">

Add Custom Styling

Let us style the selected images, here is the styling code that you have to add it inside the 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

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


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.


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

2 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

5 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago

React Build Counter using useReducer Hook Tutorial

React js counter using the useReducer hook example. In this post, we will learn how…

2 weeks ago