Ionic developers are in high demand in the mobile development industry. To crack your next Ionic interview, prepare with these Ionic framework interview questions compiled by experts and pursue your career as a Mobile Application Developer, Frontend developer, and of course, an Ionic developer. Being thorough with these Ionic framework interview questions and answers will help you answer questions on Ionic CLI, different components in Ionic, how to create a new project using Ionic CLI, and also how to make Ionic apps to work in offline mode and intermediate topics like Shadow DOM in Ionic 4, Virtual Scroll component in Ionic, ion-tabs, etc.

1.What is the Ionic CLI?

The official Ionic CLI, or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. The CLI can also be used to perform cloud builds and deployments, and administer your account on Ionic Pro.

2.Who created the Ionic Framework?

The Ionic Framework was created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. The initial version was based on AngularJS. After releasing an alpha version of the framework in November 2013, a 1.0 beta was released in March 2014, a 1.0 final in May 2015, and several 2.0 releases in 2016.

3.How do you install Ionic Framework?

Both Ionic and Cordova are available as Node packages that can be installed using Node Package Manager or NPM. To use NPM, we need to install NodeJS first and then using a terminal or command prompt, we can execute the following command to install both Ionic and Cordova in a single go, globally.

npm install ionic cordova -g

4.What is the 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). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

Currently, Ionic Framework has official integration with Angular, but support for Vue and React are in development.

5.What is the recommended way of implementing navigation within an Ionic 4 app?

Ionic 4 depends on Angular’s router module called RouterModule for navigation. The NavController service is still there but it will be deprecated very soon and is therefore not recommended to be used in new Ionic apps built with Ionic 4.

The ion-router-outlet component is used to manage the animations that show up as the user navigates to-from a component within the app. This is same as the router-outlet that Angular has but with some animation related sugar added.

6.How is Ionic Framework v4 different from the previous versions of the Ionic Framework?

Ionic 4 is one the biggest updates that the Ionic team at Drify Co. has made to the framework. It is a complete re-write of the framework from scratch. The primary changes are:

  • Ionic 4 is built with web-components. This essentially means that the Ionic Framework is available as drop-in UI components ready to be used in our apps. These components are self-contained and do not require any external dependencies. All the HTML, CSS and JS required for a web-component to work is included with the web-component. To use the framework, you just need to add the CSS and JS files required to your project and you are good to go. No build process required anymore.
  • Ionic 4 makes use of CSS variables. CSS variables are entities defined by developers that contain specific values to be reused throughout an app. The values of these entities can be overridden by app developers to achieve custom colors and designs in their Ionic Apps to make their app standout.  Earlier, this was done with the help of a CSS preprocessor like SASS. 
  • Ionic 4 uses Angular’s RouterModule to implement navigation. Earlier, NavController was used to implement push-pop style navigation within the app which has now been deprecated and the much more powerful and flexible RouterModule is the recommended way. Using RouterModule enables lazy-loading for the Ionic components.

7.What is Lazy Loading?

Lazy loading is a general concept where we only load things as we need them. In Ionic 3, we would use the @IonicPage decorator to lazy load our pages, and now with Ionic 4 we lazy load our Angular components with Angular routing. The idea behind lazy loading pages is that we don’t need to load every page in the application as soon as the application is launched.

Lazy loading web components in Ionic 4 takes this a step further. In Ionic 4, every Ionic component that we use is a web component. Each of these web components will be lazily loaded only when they are accessed in the application.

This means that the code for <ion-button> or <ion-card> will only be loaded when it is accessed in the application, even each <ion-icon> is loaded individually rather than having to load the entire icon library. This isn’t even something we need to set up, it is just the way it works by default.

8.Name some popular apps built with the Ionic Framework?

Pacifica: Cognitive Behavioural Therapy

Sworkit: Workout and Fitness Plan

MarketWatch: Stock Market and Business News

McDonald’ Turkiye

JustWatch: Streaming Search Engine

Portfolio

Untappd: Social Discovery and Check-in Network

National Museum of African American History and Culture

Cryptochange: Cryptocurrency Tracker

9.Describe some cons of the Ionic Framework.

Although the framework has improved a lot over the last years and the latest version is just amazing. The performance has only increased with Web Components and Lazy Loading but there is a performance gap between a native app and the app built with the Ionic Framework. Ionic Apps still work in a web-view and even though the browsers today are super-powerful, the performance lag is there. It might not be noticeable in many cases, but still, it is there.

Also, since the apps built with Ionic run essentially in a web browser, they have limited access to the devices’ hardware. To get access to the native APIs, like the device’s camera or GPS, we depend on Cordova plugins. If there is not a plugin that fits your need, you need to fall back to the native development. Either you get a plugin developed or you develop the whole app as a native app.

10.How would you save data in an Ionic app so that it can be accessed later or on the next launch?

Ionic Framework offers a Storage module that resides in the @ionic/storage package. It allows us to store key-value pairs and JSON objects in a secure reliable storage, however, it has its own set of limits. 

Storage uses a variety of storage engines underneath, picking the best one available depending on the platform. When running in a native app context, Storage will prioritize using SQLite, as it’s one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.

When running in the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.

11.The size of your Ionic application’s generated APK is huge. What can you do to reduce the size?

First off, we can always get rid if the static assets that are not in use within the app. That reduces the size of the generated executable. 

We can also optimize static assets like images, audio and video for mobile devices. That way the app size will reduce considerably. It does not makes sense to use huge images, audio and videos files as a static asset within the app.

Finally, we can get rid of any external modules and cordova plugins that are there but are not being used. Having unnecessary code in the app is an overkill and add a lot of extra bytes to the app’s size.

12.What is a Web View?

Ionic apps are built using web technologies and are rendered using Web Views, which are a full screen and full-powered web browser.

Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.

13.What is CORS? How would deal with it?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.

An example of a cross-origin request: The frontend JavaScript code for a web application served from http://domain-a.comuses XMLHttpRequest to make a request for http://api.domain-b.com/data.json.

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. Web Views also enforce CORS, and generally it needs to be handled on the server. If CORS is not implemented on the server, there is a native plugin that performs HTTP requests in the native layer which bypasses CORS. So it’s important that external services properly handle cross-origin requests. 

14.How would you debug apps when testing on real devices or emulators?

We can use Chrome remote debugging and other developer tools offered by Google Chrome to spot the issues within the app. Remote debugging allows us to debug live content on an Android device from our Windows, Mac, or Linux computer. Safari also allows similar features to debug an iOS app running on Simulator or a connected iPhone.

15.What is ion-app?

App is a container element for the whole Ionic application. There should only be one <ion-app> element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the <ion-app> when they are presented.

16.What are the color names that are bundled in when we created a new Ionic 4 project?

Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a shade and tint, used throughout Ionic. These nine colors are, primary, secondary, tertiary, danger, warning, success, dark, medium and light.

17.Name all the page lifecycle hooks in Ionic 4.

There are 3 different lifecycle hooks in Ionic 4. They are as following.

ionNavDidChange – Event fired when the nav has changed components

ionNavWillChange – Event fired when the nav will components

ionNavWillLoad – Event fired when Nav will load a component

18.What is the CLI command to create an Ionic 4 app as on today (Sep 2018)?

ionic start <app-name> <template-name> --type=angular

The above command generates a new Ionic 4 project with Angular integration.

19.An Ionic 4 app, integrated with Angular, is using Angular’s class ActivatedRoute. What is the alternative way of sharing data between different pages/components in an Ionic 4 app using Angular?

We can also use Angular Services to share data between multiple pages. An Angular service is a singleton and thus does not get destroyed when the user loads and unloads components within the app. Therefore, the data can be set from one component and it can be retrieved from another component. This is what we need to pass data from one component to another during navigation.

20.How would compare Ionic 4 and Apache Cordova?

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies – HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s capabilities such as sensors, data, network status, etc

Ionic on the other hand is a web framework with some additional tools and services that lets you build a responsive mobile app using web technologies like HTML, CSS and JS. Once the web is done, it is packaged into a native app for supported platforms like Android, iOS and Windows using Apache Cordova. So, in short, Ionic uses Apache Cordova to create apps with the help of web technologies for various mobile operating systems.

21.Name some Ionic components with brief descriptions of each.

ion-list – The list component is used to display rows of information, such as a contact list, playlist, or menu. It can display cards, list items and more. Lists are also very customizable and match the design of the native Android and iOS lists by default.

ion-card – Card components are a great way to display important pieces of content, and are quickly emerging as a core design pattern for apps. Cards can contain images, buttons, text and more. Cards can also be used standalone, in a list or in a grid.

ion-grid – Grid is a powerful mobile-first system for building custom layouts. The Grid component can be used to ensure your app looks great on any device. It is heavily influenced by Bootstrap’s grid system.

ion-button – Buttons are an essential way to interact with and navigate through an app, and should clearly communicate what action will occur after the user taps them. Buttons are highly customizable with color, shape and size being fully customizable. We support round buttons, FAB buttons, outline buttons and more!

ion-input – Inputs allow users to enter data into a UI. They typically appear in forms and dialogs. They should always be wrapped with an ion-item.

22.Explain the working of ion-grid component.

ion-grid is a powerful mobile-first flexbox system for building custom layouts.

It is composed of three units — a grid, row(s) and column(s)). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.

Here are some pointers that we need to keep in mind while working with grids in Ionic.

  • Grids act as a container for all rows and columns. Grids take up the full width of their container, but adding the fixed attribute will specify the width per screen size.
  • Rows are horizontal groups of columns that line the columns up properly.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • The size-{breakpoint} attributes indicate the number of columns to use out of the default 12 per row. So, size=”4″ can be added to a column in order to take up 1/3 of the grid, or 4 of the 12 columns.
  • Columns without a value for size will automatically have equal widths. For example, four instances of size-sm will each automatically be 25% wide for the small breakpoint and up.
  • Column widths are set as a percentage, so they’re always fluid and sized relative to their parent element.
  • Columns have padding between individual columns, however, the padding can be removed from the grid and columns by adding no-padding on the grid.
  • There are five grid tiers, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.

Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., size-sm=”4″ applies to small, medium, large, and extra large devices).

23.Explain the purpose of config.xml file in an Ionic project.

config.xml is a global configuration file that controls many aspects of a cordova application’s behavior. This platform-agnostic XML file is arranged based on the W3C’s Packaged Web Apps (Widgets) specification, and extended to specify core Cordova API features, plugins, and platform-specific settings.

For projects created with the Ionic CLI, this file can be found in the top-level directory. It contains vital information about the project like the package name, version, author’s information and a lot of permissions and specifications as well.

24.What is event binding in Angular?

When a user interacts with an application in the form of a keyboard movement, a mouse click, or a mouseover, it generates an event. These events need to be handled to perform some kind of action. This is where event binding comes into picture.

Event binding allows us to define methods that are executed every time and event happens. These methods are “bound” to these events or the other way around is also true. Hence the name Event Binding.

25.What is the purpose of ion-infinite-scroll component in Ionic?

ion-infinite-scroll component is very useful component. It allows to load data into the app (typically in a list) as the users scrolls the page. The most common use case is where the app loads more content to display to the user as the user keeps scrolling the page. This concept is used widely nowadays in almost all modern apps.

The Infinite Scroll allows us to perform an action when the user scrolls a specified distance from the bottom or top of the page. The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance.

The Infinite Scroll allows us to perform an action when the user scrolls a specified distance from the bottom or top of the page. The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance.

26.What is the purpose of ion-refresher component in Ionic?

The Refresher provides pull-to-refresh functionality on a content component. It is a functionality that allows the users to pull the page down from the top and as they let it go, the content on the page is refreshed. 

To use it, we place the ion-refresher as the first child of our ion-content element. Pages can then listen to the refresher’s various output events. The refresh output event is fired when the user has pulled down far enough to kick off the refreshing process. Once the async operation has completed and the refreshing should end, call complete().

27.How would you get the list of all the available startup templates for an Ionic app?

ionic start –list command displays the list of all the available templates that can be used while creating a new Ionic application. As for Ionic 4, as of now, only blank and sidemenu are available

28.What are different page lifecycle events in Ionic?

These are the events:

ionNavDidChange event is fired when the nav has changed components.

ionNavWillChange event is fired when the nav will components.

ionNavWillLoad event is fired when Nav will load a component.

29.What programming language do you need to know if you are planning to build an Ionic 4 app with Angular?

TypeScript.

30.Can we use Firebase with Ionic?

Yes, absolutely. Firebase SDK is also available as a Node module and we can install it within our Ionic project, import it and it is ready to be used.