How to Display Version number on Ionic iOS and Android Builds

Stavros Kounis
Oct 17, 2018 · 4 min read
  • Use Ionic’s plugin App Version.
  • Build the app and display the version number

Prerequisites

To follow along with this tutorial, you will need:

  • App Version, a necessary Ionic plugin

Step 1: Clone GitHub Repo

Visit http://github.com/appseed-io/supermodular2 and download or clone the Supermodular 2 app:

$git clone https://github.com/appseed-io/supermodular2.git

Step 2: Install Libraries

Open a terminal window and navigate to the supermodular2 local folder. Install the NodeJS dependencies:

$npm install

Step 3: Run the Starter App

In your terminal, make sure you are located in the supermodular2 folder and run the command:

$ionic serve --lab
$ionic serve

Step 4: Install App Version plugin

In your terminal, navigate to the supermodular2 folder and run the command:

$ ionic cordova plugin add cordova-plugin-app-version
$ npm install --save @ionic-native/app-version

Step 5: Display Version Number in Sidemenu

ADD VERSION NUMBER IN MARKUP

Inside the file src/app/app.html we add the following code

IMPORT APP VERSION PLUGIN TO APP.MODULE.TS

We need to import the plugin by adding the following code to the src/app.module.ts file

USE APP VERSION PLUGIN FROM APP.COMPONENT.TS

We add the following code under src/app.component.ts

DISPLAY APP VERSION IN VIEW

In a previous step we added the App Version label in our HTML code. Now it is time to bind it with the actual data by adding the following code: {{ app_version }}

CHANGING THE APP VERSION

Our app’s version number is located in config.xml file in the project’s folder, as shown below.
For this demo we will leave the default value.

Step 6: Build and Use the App

Navigate to the project’s folder with the command line and run the following command:

$ ionic cordova build android

References

Ionic, Ionic App Version, Source code, Cover photo

Appseed IO

Articles about Ionic, Phonegap, Mobile and MEAN stack technologies

Stavros Kounis

Written by

Software developer and Javascript enthusiast, passioned with web and mobile technologies, skounis.github.io

Appseed IO

Articles about Ionic, Phonegap, Mobile and MEAN stack technologies