Top 27 Ionic Interview Questions (UPDATED for Ionic 4) To Check
Arguably, Ionic is one of the most popular frameworks available. According to the stats, there are 5M Ionic devs in over 200 countries worldwide. Over 75 percent of them build apps for commercial use. Diesel and McDonald’s built their apps with Ionic.
Q1: What is Ionic Framework?
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.
Q2: Can we work with Ionic > 1 and AngularJS?
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 ).
Q3: How can you test Ionic applications?
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.
Q4: How do you pass data from one view to another in Ionic applications?
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:
$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)
openDetailsWithState() {
let navigationExtras: NavigationExtras = {
state: {
user: this.user
}
};
this.router.navigate(['details'], navigationExtras);
}Q5: What is hybrid app development?
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.
Q6: How can you access mobile phone native functionality in Ionic applications, for example the camera?
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.
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. 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.
Q7: How can you detect a platform (Android or iOS) at runtime in Ionic application?
Ionic provides platform classes: when the application is loaded, Ionic adds CSS classes to the <body> tag. For example, on iOS devices, Ionic adds platform-ios class to <body> tag. Ionic also adds OS version classes such as platform-ios8 (for iOS 8) and platform-android4_4 (for Android 4.4).
Q8: How do you persist data between application launches using Ionic?
As Ionic behind the scene builds HTML5 based applications, you can use localStorage and sessionStorage API to persist data on the mobile phone. However, since localStorage can only store strings, objects need to be stringified before saving. Also, it is important to mention localStorage has size limit around 5MB.
Q9: How many Types of Storage Available in Ionic Framework?
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
Q10: How to use observables in the Ionic framework?
In the Ionic framework, observables are not specific to Ionic or Angular and they are provided with RxjS library. Observables are like a commitment but a lot of things can be worked out from it. It can deal with multiple values at a time rather than just resolving one value at that time. It can also be used to manipulate the data which is associated with it. Observables cannot be executed until and unless they are subscribed to. Various operations can be applied to observables for modification and returning to a new one. We can also create our own observable. The observable pattern is combined into one with the help of the subject which is preferred for simple implementations.
Q11: How would you compare Ionic vs Flutter? When would you choose one?
Ionic apps are built using the languages of the web: HTML, CSS, and JavaScript. Thus, if you know how to build a basic web app, you already know how to build with Ionic.
With Ionic, you can deploy a native iOS or Android app, native desktop app, or web app, all from a single, shared codebase. When running on mobile, Ionic runs inside a native container using Cordova or, more recently, Capacitor, which enable full access to any native device features or APIs. The UI of your Ionic mobile app runs in a WebView, which is effectively a headless browser that is invisible to the user. In a desktop implementation, Ionic runs inside a native desktop container like Electron, or directly in any mobile or desktop browser as a Progressive Web App.
Ionic Pros:
- Code once, run everywhere*.
- Angular + Typescript are very mature. React + Vue for Ionic V.4
- Reactive UI.
- Huge compatibility.
- Lots of native plugins.
- Lots of Angular packages.
- Greater user base.
- Mature Tooling.
Ionic Cons:
- Not native. Embedded browser apps.
- Less performance (Not really noticeable if your code is good).
- Big learning curve if you have no web development experience.
When building for mobile, Flutter uses the Dart compiler to convert your Dart code into native machine code that will run on the device platform, along with a custom rendering engine to display your UI inside a mobile app. Flutter does not use the native UI elements, like you would find in React Native, nor does it use Web Components like Ionic. Instead, Flutter offers its own library of UI Widgets.
Flutter Pros:
- Open source
- Very fresh and vibrant community.
- Code once, run on iOS and Android.
- Native performance, Compiled into Native C
- Reactive UI.
- Great Tooling for both VSCode and Android Studio.
- You can interact with native SDKs and use native dependencies.
Flutter Cons:
- Need to learn Dart
- Non mature user base
- Small amount of packages
- Does not support 32-bit iOS devices
- Google has a bad history with product loyalty
- Self-contained ecosystem from scratch
Q12: What are some possible security issues with Ionic apps?
When building hybrid applications, security is a common issue, as long as your app can be reverse engineered. Since version 4, Ionic CLI does provide built-in code uglification — a common technique of making the code difficult to read by hackers. But you also need to know that if you are using Angular CLI or older versions of Ionic, there is no code uglification going on. Your developers will have to uglify the code on their own.
There are a lot of ways to compromise what’s happening with your mobile app or PWA, like a man-in-the-middle attack. Why does it matter? Well, because basically, your Ionic application is a website, running on the device. The important takeaway is that Ionic communicates with the backend using usual HTTP calls. So, you also want to use the security measures on your Ionic app that you use to protect your website, like using HTTPS connection instead of the HTTP.
Q13: What are the most prominent advantages and disadvantages of building applications using the Ionic framework?
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.
Q14: What is Capacitor?
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.
Q15: What is Ionic Native?
Ionic Native is a TypeScript wrapper for Cordova or PhoneGap plugins which provides adding any native functionality to the Ionic mobile app. We can implement any of the Cordova plugins community in an Ionic application easily with the help of Ionic Native. One of the functionalities of an Ionic native is to write code better. We can integrate Cordova plugins without Ionic Native as well but Ionic Native add types to these Cordova plugins using wrapper classes and allow us to use intellisense and code suggestions. This prevents from running into errors and write codes quicker and better. Plugins are added frequently to the Ionic Native directory.
Q16: What is the advantage of caching the views in Ionic apps?
By default, views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is then reconnected, and the existing element that was left in the DOM becomes the active view. This also allows for the scroll position of previous views to be maintained.
Caching can be disabled and enabled in multiple ways. By default, Ionic will cache a maximum of 10 views, and not only can this be configured, but apps can also explicitly state which views should and should not be cached.
Caching can be disabled per view by using cache: false in UI-router’s state config. The$ionicConfigProvider can be used to set the maximum allowable views which can be cached, but this can also be use to disable all caching by setting it to 0.
Q17: What is the difference between Cordova and Ionic?
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.
Q18: What is the difference between PhoneGap, Cordova, and Ionic?
PhoneGap is a library that exposes native mobile phone functionalities as JavaScript API. When Adobe purchased PhoneGap, its open source core was donated to the Apache Software Foundation under the name Cordova. In the beginning, there was almost no difference between Cordova and PhoneGap. Although, over the years of development, Adobe started adding a proprietary set of the services to PhoneGap. Today, it is safe to say PhoneGap is Cordova plus extra Adobe services.
Ionic uses Cordova, not PhoneGap for its core tools. Beside native mobile phone functionalities, Ionic gives structure and code scalability to JavaScript applications by using AngularJS (Angular, React and Vue for IOnic 4). It also provides a set of Angular directives and components to speed up application development.
Q19: What does it mean that Ionic became framework-agnostic?
Q20: How is the Ionic Framework v4 different from v3?
Q21: If more than one component is trying to make an HTTP call to same URL, then how can you restrict making 2 network calls?
Q22: What are the new features in Ionic 4?
Q23: What is the difference between Capacitor and Cordova?
Q24: Performance of Ionic application is bad on older Android devices. Why is this, and what can be done to improve it?
Q25: What AOT and JIT and which is used by Ionic?
Q26: What Are The Ionic Lifecycle Events?
Q27: What are some security measures should be made for Ionic app?
Rust has been Stack Overflow’s most loved language for four years in a row and emerged as a compelling language choice for both backend and system developers, offering a unique combination of memory safety, performance, concurrency without Data races...
Clean Architecture provides a clear and modular structure for building software systems, separating business rules from implementation details. It promotes maintainability by allowing for easier updates and changes to specific components without affe...
Azure Service Bus is a crucial component for Azure cloud developers as it provides reliable and scalable messaging capabilities. It enables decoupled communication between different components of a distributed system, promoting flexibility and resili...
FullStack.Cafe is a biggest hand-picked collection of top Full-Stack, Coding, Data Structures & System Design Interview Questions to land 6-figure job offer in no time.
Coded with 🧡 using React in Australia 🇦🇺
by @aershov24, Full Stack Cafe Pty Ltd 🤙, 2018-2023
Privacy • Terms of Service • Guest Posts • Contacts • MLStack.Cafe
based on 86 Trustpilot 
Reviews