Top 29 Ionic Interview Questions And Answers

Question 1

What is Ionic Framework?

Accepted Answer

**Ionic Framework** is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript). Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). Currently, Ionic Framework has official integrations with Angular and React, and support for Vue is in development.

Question 2

Can we work with Ionic > 1 and AngularJS?

Accepted Answer

Unfortunately, **no**. Ionic (1) at a very high-level is essentially just a wrapper & directive/component library for AngularJS (1). In that same regard, Ionic 2 is built in the same way, utilizing all the benefits of Angular 2+.

Ionic 2 breaks away from being tied to the DOM in the browser, by using angular 2 which is the reason for the massive change between ionic 1.x and ionic 2.x. ( Angular 2.x architecture is not tied down to the DOM unlike the Angular 1.x ).

Question 3

How can you test Ionic applications?

Accepted Answer

Ionic v.1 applications are built using AngularJS. Angular has a rich set of test libraries and frameworks such as Jasmine and Karma test runner. These frameworks can be used to write unit tests for Ionic applications. Also, `ionic-CLI` provides `live reload` feature so the application can be tested in the browser. For example, the `ionic serve` command can be used to load the application in any browser. Thus, we can use Chrome Developer Tools or Mozilla Firefox with Firebug to debug and inspect Ionic applications.

Question 4

How do you pass data from one view to another in Ionic applications?

Accepted Answer

Ionic v.1 uses AngularJS and UI-router. It means you can use Angular services or UI-router’s state `resolve` to pass data from one view to another. Since Angular services are singletons, data stored in services can be accessed across other Angular controllers.

As mentioned, UI-router provides a `resolve` configuration. For example:
```js
$stateProvider
  .state('todos', {
    url: '/todos',
    controller: 'TodosCtrl',
    templateUrl: 'todos.html',
    resolve: {
      todos: function(TodosService) {
        return TodosService.getTodos()
      }
    }
  })
```

One advantage of `resolve` over stateful services is better testing: as `resolve` injects dependencies in the controller, it is easy to test them.

When using Ionic v.4 you have 3 options:
1. Using Query Params (bad)
2. Service and Resolve Function (legit)
3. Using Router Extras State (new since Angular 7.2)

```js
 openDetailsWithState() {
    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);
  }
```

Question 5

What is hybrid app development?

Accepted Answer

**Hybrid apps** are developed using web technologies like HTML, CSS and Javascript, and then wrapped in a native application using platforms like Cordova. The apps are shown in its own embedded browser, like UIWebView in iOS and WebView in Android (not Safari or Chrome). This allows you to use any web-native framework for mobile app development.

Question 6

What are the most prominent advantages and disadvantages of building applications using the Ionic framework?

Accepted Answer

The most obvious advantages are:

* Ionic framework builds hybrid applications using web technologies. It means web developers can easily build mobile applications too. Also, because it uses JavaScript, almost the same codebase can be used to build both iOS and Android applications.
* Development cost is less compared to native iOS and Android applications.
* Ionic framework is excellent for quick application ideas prototyping.

Some of the disadvantages are:

* It is not suited for high-end graphics dependent applications or games.
* Performances are not as good as native applications, namely animations, scrolling, and network operations.
* As mentioned, JavaScript animations are not as performant as native animations. However, there are JavaScript libraries, like tweenMAX, which provide decent animation performance on the devices.

Question 7

What is the difference between Cordova and Ionic?

Accepted Answer

Apache Cordova is an open source framework that enables web developers to use their HTML, CSS, and JavaScript content to create a native application for a variety of mobile platforms.

Used for hybrid development in HTML, CSS, and JavaScript, Ionic allows to quickly create powerful and beautifully designed mobile apps that can be deployed through Cordova. Ionic wraps all Cordova commands and lets you work with any Cordova plugin or additional package. Along with it, you have the following three advantages over Cordova-only development:
1. Slick UI and UX - Ionic is a perfect fit for the easy and fast development of a simple but trendy design with everything you may need already included in the framework kit. 
2. A More Convenient Development Process - The ‘serve’ feature is present in both Ionic and Cordova and allows developers to access an HTTP-server to test the application code in a desktop browser. However, working with ‘cordova-serve’ is rather inconvenient as it doesn’t let you launch the test from your initial www-folder and forces you to create an app build first.
3. Higher Performance of the Final Product - Compared to Cordova-built apps, the Ionic code creates more powerful and higher performing applications. With jqLite, a fraction of jQuery, it takes a minimal DOM manipulation, and native hardware acceleration is enough. Ionic optimizes animation effects and tunes up the GPU work to achieve the best processing time.

Question 8

What is Capacitor?

Accepted Answer

**Capacitor** is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap, with inspiration from other popular cross-platform tools like React Native and Turbolinks, but focused entirely on enabling modern web apps to run on all major platforms with ease. Capacitor has backwards-compatible support for many existing Cordova plugins.

With Ionic Capacitor, you create the app, without using any cordova imports, not even cordova.js, instead Capacitor’s own native plugin repository imported as @capacitor/core. Capacitor can also be used without the Ionic framework and it’s backward compatible with Cordova.

Question 9

How can you access mobile phone native functionality in Ionic applications, for example the camera?

Accepted Answer

Ionic does not provide a camera API out of the box. However, since Ionic uses plugins architecture, and because it is based on Cordova, we can use Cordova plugins in our application. Ionic team provides a set of Cordova extensions with Angular wrappers, and they can be found at [ngCordova](https://github.com/driftyco/ng-cordova/).

To use Cordova plugins, we need to install the plugin using Ionic command `install <plugin name>`. In some cases, we will additionally need to add the plugin’s Angular module to your Angular application too.

To use a mobile phone’s camera in the Ionic application, we can call the camera API by using [cordova-plugin-camera that is hosted on GitHub](https://github.com/apache/cordova-plugin-camera). This plugin defines a global `navigator.camera` object, which provides an API for taking pictures and for choosing images from the system’s image library.

Question 10

How many Types of Storage Available in Ionic Framework?

Accepted Answer

The easiest method to store key or values and JSON objects are called as storage in the Ionic framework. In these various storages, engines are used. While in case of a web application, the storage will tend to use IndexedDB, WebSQL, and local storage. Various storages are available in ionic framework. Some of them are as follows:

* HTML local storage
* Cookie and session storage
* indexedDB
* WebSQL
* PouchDB
* Webservice/API storage
* Cordova storage

Top 29 Ionic Interview Questions

What is Ionic Framework?

How do you pass data from one view to another in Ionic applications?

What is hybrid app development?

Can we work with Ionic > 1 and AngularJS?

How can you test Ionic applications?

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

How do you persist data between application launches using Ionic?

What’s the difference between “ionic build” and “ionic prepare”?

What is Ionic Native?

How would you compare Ionic vs Flutter? When would you choose one?

How to use observables in the Ionic framework?

What is the advantage of caching the views in Ionic apps?

What are some possible security issues with Ionic apps?

How can you access mobile phone native functionality in Ionic applications, for example the camera?

How many Types of Storage Available in Ionic Framework?

What is the difference between Cordova and Ionic?

How can you detect a platform (Android or iOS) at runtime in Ionic application?

What is Capacitor?

What are the most prominent advantages and disadvantages of building applications using the Ionic framework?

If more than one component is trying to make an HTTP call to same URL, then how can you restrict making 2 network calls?

How is the Ionic Framework v4 different from v3?

What does it mean that Ionic became framework-agnostic?

What is the difference between Capacitor and Cordova?

How can you render a 5000 item list in Ionic, without affecting scroll performance?

What are the new features in Ionic 4?

What AOT and JIT and which is used by Ionic?

What are some security measures should be made for Ionic app?

What Are The Ionic Lifecycle Events?

Performance of Ionic application is bad on older Android devices. Why is this, and what can be done to improve it?