IONIC Framework Interview Questions

Ionic is mobile app development framework for web developers. It helps web developers to create the Hybrid mobile application. The ionic framework is complete open-source SDK for hybrid mobile app development.By using Ionic you can create a Mobile application on various platforms like Android, IOS, and windows using a single codebase.

Read Best IONIC Interview Questions and Answers

IONIC Framework Interview Questions

1) What is Ionic Framework?

IONIC framework is an HTML5 platform that enables web developers to build hybrid mobile apps. Hybrid apps are those apps that have access to native perform layer and are small websites running in browser shell in the apps. It is a powerful HTML5 SDK that helps to build mobile apps using HTML , CSS, and JavaScript. Ionic framework mainly emphasizes on the look and feel of the app and its UI interaction. This means that we aren’t a replacement for PhoneGap or JavaScript framework. Ionic fits well with the front end part of your app. They are free to use under MIT license so it can be used for personal or commercial projects.

2) What is the difference between PhoneGap, Cordova, and Ionic?

  • Cordova: Cordova is a JavaScript framework that builds apps, which can access the device hardware. Cordova cannot build UI interactions of mobile apps because it uses HTML5, CSS6, Sencha to build UI. However, it complements other web technologies used to develop mobile apps. Cordova is also known as Apache Cordova.
  • PhoneGap: PhoneGap is a framework developed by Adobe Systems. It is used for developing mobile applications and can be used by anyone with the knowledge of CSS, HTML, JScript. PhoneGap is a propitiatory version of Apache Cordova and provides extra features apart from the existing Cordova.
  • IONIC: IONIC framework is used to build cross-platform mobile apps using web technologies like CSS, HTML. Released in 2013, it was built on top of Angular JS and Apache Cordova.

3) Who developed Ionic framework?

Ionic Framework was created by Drifty Co. in 2013 and developed by Max Lynch, Ben Sperry, and Adam Bradley.

4) How to get the installed version of the Ionic framework?

Run ionic.version command in the console of your web browser to check installed version of IONIC Framework.
Also, Read Javascript interview questions

5) What is the difference between ionic polymerization and free-radical?

IONIC POLYMERIZATION FREE-RADICAL IONIC
  • Ionic polymerization is a chain polymerization that has ions and ion pairs in the center.
  • The initiation of ionic polymerization consumes very less activation energy than radical polymerization.  
  • It is an alternative to free radical polymerization.
  • Free radical polymerizations are those polymerizations that are formed by adding free-radical building blocks.
  • Free radical polymerization uses initiators and coinitiators.
  • It is the only way to obtain different types of polymers and material composites.

6) List some popular apps built with Ionic Framework?

Here goes a list of some popular applications built with the help of ionic framework: –

  • Pacifica: Cognitive Behavioural Therapy
  • TD Trading: Stock Trading App
  • Sworkit: Workout and Fitness Plan
  • MarketWatch: Stock Market and Business News
  • ChefSteps: Cooking Tutorials and Tool
  • Nationwide: Insurance and Financial Services
  • JustWatch: Streaming Search Engine
  • Untappd: Social Discovery and Check-in Network
  • National Museum of African American History and Culture
  • Cryptochange: Cryptocurrency Tracker

7) How to use service/providers in Ionic?

Services play an important role in Ionic framework as they provide information to our application and perform various tasks for us. ConnectivityMonitor, SimpleAlert, data, GoogleMaps, etc. are some of the services which are built in ionic framework. There are few concepts which are to be kept in mind while creating a service. Importing a service, adding a provider to it, and injecting it is the most important thing. The services should be imported in the classes where they are to be used. When it is injected inside a constructor, a new member variable is created which can be accessed from anywhere within the class. A provider can be added in a service by two ways. Either it can be added to an individual component, or it can be added globally to the application when bootstrapping the root component.

8) How many types of storage available in Ionic framework?

The easy way to store key or values and JSON objects are known as storage in Ionic Framework. In this various storage, engines are used. While on the web application, the storage will tend to use IndexedDB, WebSQL, and local storage. Various types of storage are available in the Ionic framework. Some of them are –

  • HTML5 local storage
  • Cookie and session storage
  • indexedDB
  • WebSQL
  • PouchDB
  • Webservice/api storage
  • Cordova storage.

9) List few pros and cons of Ionic framework?

Everything has some pros and cons.Here are some advantages and disadvantages of Ionic framework are listed below: –
Advantages:
  1. All the supported platforms have only one source. Mainly they are android and OSX.
  2. It is mainly developed in HTML, CSS, and JS. Almost all the developers are familiar with these languages.
  3. Most importantly, angular is being used which is by default embedded in the ionic framework.
  4. It is completely free and is considered as one of the best open-source software for developing hybrid mobile applications.

Disadvantages:

  1. There is a performance gap between the ionic and the native applications. Ionic apps are not as fast as the native apps.
  2. Ionic applications may not be as secure as the native applications.
  3. The ionic applications may lack in some native functions. In such case, plugins have to be developed.

10) What are the new features included in Ionic2?

There is a reason why Ionic2 framework is better than the Ionic1 framework. Here are some features which were included in the ionic2 framework when it was being developed.
  1. Ionic2 framework consists of classes unlike ionic1 which has controllers.
  2. In ionic2, every component has its own folder and its own class file.
  3. In ionic2, you can automatically generate pages, providers, tabs, pipes, components, and directives.
  4. In this, more native approach is used for navigation.
  5. Ionic2 is just plain old JavaScript.

11) What is the current stable version of Ionic framework?

The current version of Ionic Framework is 4.0. It was released on Jan. 23, 2019. Ionic uses Angular 6 or above for development. It helps you build native-feeling mobile applications using web technologies. It mainly focuses on the look and feel, and the user interface of your application.

12) How to use observables in an Ionic framework?

Observables are something that are not specific to Ionic or Angular and are provided by the RxJS library. Observables are almost similar to the promises but can do a lot more. It can deal with multiple values at a time rather than just resolving one value. You can even subscribe to an observable to manipulate the data which is associated with it. Observables are considered to be “lazy”, i.e. they won’t get executed until and unless they are subscribed to. Various operations can be applied to the observables for modifying it and returning a new one. You can even create your own observable. The observable patterns are combined into one with the help of subject which is preferred for simple implementations.

13) How to parse JSON in Ionic?

You can Parse JSON in Ionic with the following steps:

  • CREATE TABLE users( user_id int AUTO_INCREMENT PRIMARY KEY, username varchar(50)
  • CREATE TABLE feed( feed_id int PRIMARY KEY AUTO_INCREMENT
  • <ion-header> <ion-navbar>
  • /* Time Ago */ $npm install --save angular2-moment
  • $ cordova platform add ios. $ ionic build ios
  • $ cordovaplatform add android. $ ionic build android

14) How to open a download link while inside an ionic inAppBrowser?

Use Javascript window.open(url, '_blank', 'location=no'); to open a download link while inside an ionic inAppBrowser

15) How to rename Ionic app from HelloCordova to custom?

To Rename Ionic app from HelloCordova to custom.

Open config.xml file from your project's root directory and update the value inside tags

16) How to update Cordova plugins?

Use the following command to update Cordova plugins.

npm install -g cordova-check-plugins
cordova-check-plugins --update=auto

17) How to use non-native plugins on Ionic?

You can use the non-native plugin in Ionic by first installing the ionic Cordova plugin add and then adding var session = new cordova.plugins.phonertc.

18) How to get selected value from a select in Ionic?

To get a selected value from a select in Ionic, you can access the Ionic select by using a standard element. You must take care that the select component always used with the child element, therefore if the does not have a value attribute, then its text will be used as the value.

19) How to add a Custom initial splash screen in Ionic?

You can add a Custom initial splash screen in Ionic by following the given steps:

  • Generate a splash screen that can transition seamlessly to your fake splash screen (e.g. just a solid color)
  • Set the splash screen so that it does not auto-hide
  • Once the application has loaded, launch your fake splash screen page that contains the animation
  • Hide the real splash screen
  • After a set amount of time, dismiss the fake splash screen

20) How to convert base64 image to blob image in ionic?

You can convert base64 image to blob image in ionic by first prepend content type data, for example you can use a JPEG image by:

const base64Response = await fetch(`data:image/jpeg;base64,${base64Data}`);

And then you can convert the given responce to a blob by:

const blob = await base64Response.blob();

Now,  you can upload it to a server, display it on the screen, etc.

 

21) What is the Default Activity Class Name From AndroidManifest.xml?

Frontpage is the default activity name from AndriodManifest.xml

22) How to add maxLength on ion-input?

Use Html5 maxlength property to add maxLength on ion-input.

Example

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label color="primary" stacked>Stacked Label</ion-label>
      <ion-input type="text" maxlength="4" placeholder="Password Input"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

23) How to disable content scrolling in IONIC?

Add no-bounce property in <ion-content> element to disable content scrolling in IONIC.

Example

<ion-content no-bounce></ion-content>

24) List few storage options available in IONIC Framework?

LocalStorage, IndexedDB or SQLite Plugin, websql, pouchdb, SessionStorage are few storage options available in Ionic Framework.

25) What’s new in IONIC 4?

Ionic 4 comes with following outstanding Features that make cross-app development more easy and comfortable.

  • Web Components
  • Capacitor
  • Stencil (web component compiler)
  • ion-Backdrop (Full-screen components which overlay other components)
  • ion-Picker
  • ion-Ripple Effect
  • ion-Route
  • Color Changes
  • Lazy Loading
  • CSS Variables
  • Ionic Native 5

26) Ionic Framework developed by whom?

Ionic Framework was developed by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013.

27) What is the difference between HTML5, Native and a Hybrid app?

Difference between HTML5, native and a hybrid app are

  • Native app: A native application is basically a software or a program that is basically designed to perform a specific task on a specific platform.
  • Hybrid app: Hybrid apps are nothing but it is quite similar to the native apps. The only reason here is that it can be downloaded from the platform app store. The functions that it can perform are quite similar to the native apps.
  • HTML5 apps: The HTML5 apps can be used elsewhere in any platform of any mobile device.

28) Where do you write ionic codes?

The Iconic codes are written in HTML, Javascript, and CSS. Ionic also uses AngularJS for a lot of the core functionality of the framework.

29) What is a Web View in Ionic?

Web Views are full screen web browser which iss capable to render apps made with web technologies like HTML, Javascript, css. Ionic uses web technologies to create hybrid mobile apps.

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.