Easter Sale

Ionic Framework Interview Questions and Answers

The Ionic framework uses HTML, CSS, and JavaScript components for developing mobile and web applications. With a single codebase, developers can create cross-platform, high-quality mobile apps by combining UI components and tools. Ionic developers are in high demand in the mobile development industry. To crack your next Ionic interview, prepare with these top Ionic framework interview questions compiled by experts. 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 how to make Ionic apps work in offline mode. These questions will be equally beneficial for beginners, intermediate and expert developers. With Ionic Interview Questions, you can be confident that you will be well-prepared for your next interview. So, if you are looking to advance your career in mobile development, this guide is the perfect resource for you.

  • 4.6 Rating
  • 46 Question(s)
  • 25 Mins of Read
  • 7049 Reader(s)

Beginner

Ionic is a mobile app development framework used to build hybrid apps. Hybrid apps are basically web apps running in a browser within a wrapper that  has access to the native platform layer. Ionic framework is an HTML5 framework. It needs a native wrapper like Cordova or PhoneGap in order to run as a native app. Ionic framework lets you maintain one codebase and create builds for both Android and iOS platforms.

NodeJS , npm are required in order to install Ionic. You need NodeJS 6.0.0+ or a higher version in order to install ionic. 

CLI means Command Line Interface. Similar to Angular, Ionic CLI comes with a number of helpful commands that let you create a new project, add pages , components, providers , directives , pipes and so on. You need the CLI to run, emulate, debug, build and deploy your application. 

The syntax to create a new ionic project using ionic cli is : 

ionic start <project name> <template> for e.g. ionic start hello world blank. This would create a new project with blank screen. Optionally you can mention  tabs , side menu, etc. instead of blank as starter template. 

Ionic 4 app has a structure similar to an angular application. e2e , node_modules, src folders will be present in root directory along with individual files like angular.json, ionic.config.json, package-lock.json, package.json, tsconfig.json, tslint.json . e2e/ folder has files for running end to end integration tests, node_modules contains all the dependencies. src/app/ folder contains most of the app code that you will be writing. App folder essentially has app.module.ts, app.component.ts, app.component.html, app.component.spec.ts and app-routing.module.ts. any services, components, pages created can be stored in their respective folders. assets/ folder can be used to store images and other static content.

As its name suggests, angular.json hosts all of the angular settings like project name, root path for app folder, source root, paths for index file, main.ts, polyfills, assets folder path, css stylesheet paths, script paths, build settings etc. ionic.config.json can be used to set proxy settings for API to avoid CORS errors during development. package.json contains a list of dependencies and serve, build, test and e2e commands.

This, along with other Ionic basic interview questions for freshers, is a regular feature in application developer interviews, be ready to tackle it with the approach mentioned above.

Every component in Ionic has a lifecycle. Ionic creates, renders the component, checks it when its data-bound properties change and destroys it finally. Ionic offers lifecycle hooks that provide a way to tap into these key moments and trigger an action when they occur. 

Ionic 2 & 3 had these lifecycle events : ionViewDidLoad, ionViewWillEnter, 

ionViewDidEnter, ionViewWillLeave, ionViewDidLeave, ionViewWillUnload, 

ionViewCanEnter, ionViewCanLeave. 

  • ionViewDidLoad : Fired only when a view is stored in memory, will not fire if view has been already cached. 
  • ionViewWillEnter : fired when entering a page, before it becomes active one. this event is triggered every time user enters in the view. 
  • ionViewDidEnter : fired when entering a page, after it becomes active page. 
  • ionViewWillLeave : fired when user leaves a page, before it stops being the active page. 
  • ionViewDidLeave : fired when user leaves a page, after it stops being the active page. 
  • ionViewWillUnload : fired when a view is going to be completely removed. 
  • ionViewCanEnter : this is a nav guard. fired before entering a view. Useful when you want to control access to pages based on access credentials. 
  • ionViewCanLeave : this is also a nav guard, fired before leaving a view. 

Allows you to control whether user can exit the view or not Ionic 4 provides the Angular lifecycle hooks in addition to the above listed Ionic lifecycle hooks. All the angular lifecycle hooks are available. 

  • ngOnChanges , ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, 
  • ngAfterViewInit, ngAfterViewChecked, ngOnDestroy .

Ionic V4 offers significant changes in performance, compatibility with multiple frameworks and many other improvements compared to previous versions. 

  • Web Components:

Ionic V4 was completely rewritten to use WebAPIs and each component is packaged as a Web Component. Web Component defines as a set of Web APIs that allow you to create HTML tags that are reusable in nature. With Web Components, we can create almost anything that can be worked with HTML, CSS, and Javascript. We can also create a portable component that can be reused.

  • Compatibility with other Frameworks:

Since it's inception Ionic Framework was built using Angular but Ionic v4 is completely independent of the base framework. Since the components of the Ionic Framework such as ion-button, are now encapsulated as Web Components. Web components work with any framework, in fact, it can be done without any framework.

  • Navigation: 

In Ionic 4 there are great changes in the navigation and the Router by use of Angular Router. Ionic 3 used navigation based on a simple stack where the new pages were placed on top of the stack doing push and when we wanted to navigate backward a pop of the last page is created. Traditional websites use a linear history which means that the user navigates to a page and can press the Back button to navigate back. In Ionic Framework, applications can take this a step further by allowing parallel navigation for its user. Which means that now it is possible to have multiple navigation batteries and exchange them at any time. Also to mention NavController and ion-nav in Ionic4 have become obsolete. It can still be used but only if the application does not use Lazy Loading. Instead of NavController and ion-nav, Ionic4 uses @angular/router.

Ionic 4

Code

Ionic 3

Code

Life cycles of navigation (LifeCycles):

The lifecycles that were used in Ionic 3 as ionWillLoad will no longer be used in Ionic 4. It uses Angular life cycles such as ngOnInit and ngAfterViewInit.

routerLink:
In Ionic 3 the event (click) is used to navigate between pages from the HTML. In Ionic 4 we will use the routerLink , as it is used in the Angular applications.

routerLink

Modules:
It is not necessary to import the pages and services in the app.module.ts file. For each page there will be a module of that page, for eg: to use Reactive Forms on any page, we only import ReactiveFormsModule on the page or pages that will use it.

ReactiveFormsModule

Pros:

  • It Is Completely Free And it is considered As one Of The best Open-Source software For developing Hybrid Mobile Applications.
  • Angular Is Being Used Which Is By Default Embedded In The Ionic Framework.
  • It Is Mainly Developed In HTML, CSS, And JS and almost all developers are familiar with it.
  •  Apps developed on Ionic are very maintainable and easy to update.

Cons:

  • Ionic Applications may not be as safe/secure as The Native Applications.
  • Ionic Apps are not as fast as Native Apps
  • 3. The Ionic Apps may lack in native functionalities. In such cases, plugins have to be built.
    4. Testing can be tricky because the browser does not always give correct information about the phone environment.

Ionic application is developed using AngularJS. AngularJS has a collection of test libraries and frameworks such as Karma, Jasmine test runner, etc. Ionic uses these frameworks for testing of an application.
There are four ways to test Ionic App: in a desktop WebKit browser, in the iOS or Android simulator, in a mobile browser on your phone, or as a native app on the phone.
Desktop browser testing:

Testing your app in a browser is as simple as running the server command.

                                $ ionic serve

This will start a live-reload server for your project. When changes are made to any HTML, CSS, or JavaScript files, the browser will automatically reload when the files are saved.

Simulator Testing

  • Simulator Testing:

We can also test in the simulator using cordova commands. For eg: to test in IOS simulator, run:
                                       $ ionic cordova build ios
                                       $ ionic cordova emulate ios
Whereas in Android testing, If you want to get advanced, you can also open up the project file for a specific platform by opening the required Xcode or Android Eclipse project in platforms inside the root of your project. Then, you can build and test the platform-specific IDE.

  • Mobile browser testing:

We can also test the app directly in a mobile browser. For OS X users, Safari on OS X can debug websites and simulator applications. First, we have to enable the remote web inspector on both the device and Safari on the desktop. To do this with iOS 7 and OS X Mavericks, enable Web Inspector option in the iOS Settings -> Safari -> Advanced section, and also enable the Developer Menu in the Advanced section of Safari OS X settings.
Android apps supporting Android 4.4 or above can use Chrome for remote debugging.
If you are using the local server method from the Desktop testing section and you are on the same network as a desktop computer, you can connect to the IP address of the desktop computer to test. So, if our desktop is running a test server at 192.168.1.123:8000, we can just load that address into our mobile Chrome or Safari to test it.

One problem testing in a mobile browser is that it’s probably the furthest of the three options from the actual app experience. This is largely because the browser app is for browsing websites, so it often adds functionality that conflicts with your app. For example, Chrome and Safari both listen for drag events on the sides of the app which allows switching between open tabs. They have issues with the URL bars getting in the way, and some scrolling behavior is not the same as it is in the web view running in Cordova. It is fine for small tests, but definitely not recommended for more complex apps.

  • Testing as a native app:

Since we are building a native app, we can test it. There are several ways to do this. If you are building for iOS devices, you’ll need to sign up for an Apple Developer account to test as a native app on an iPhone or iPad. Once you have an account and you need to have set up Xcode with your certificates to enable device testing, you’ll want to open the Xcode project from platforms/ios/ and do your testing from Xcode. Testing on Android is much easier and faster. To test on a device, simply plug it in and run.
                                   $ ionic cordova run android
If this doesn’t work, make sure you have USB debugging enabled on your android device.

Ionic Applications provide amazing stability to iOS and Android devices. It provides high performance, low maintenance, less storage space to run new Ionic Apps, etc. But it’s noticed Ionic Application doesn’t perform smoothly on older Android devices. Any application created through the Ionic framework has been reported as non-working in status in older Android devices. Any Ionic applications running below Android devices v5 has multiple issues like low performance/non-performance, high maintenance, affecting other applications, etc. To run applications on older android devices a crosswalk plugin needs to be created externally which will help Ionic application to perform better on older android devices.

Ionic is an open-source SDK for developing hybrid mobile app developed from three minds of Max Lynch, Ben Sperry and Adam Bradley in 2013. The original version was first launched in 2013 and built on top of AngularJS and Apache Cordova. The latest version was re-built as a set of Web Components, allowing users to choose any UI framework like Angular, React or Vue.js. It also permits the use of Ionic components with a non-UI framework. The main factor of Ionic is providing tools and services for developing hybrid mobile, desktop and Web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. Mobile apps can be built with these Web technologies and allowed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

  • Ionic: Ionic framework is a set of CSS, JVscript library, built on Cordova and AngularJS
  • 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 gives extra features apart from the existing Cordova.
  • Cordova: Cordova is a JavaScript framework which 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 supports other web technologies used to develop mobile apps. Cordova is also known as Apache Cordova.

Many popular apps have been built with the Ionic Framework. Following are some of the few popular Apps:

  • MarketWatch: MarketWatch app is a news and market data app available on both Android and iOS. It is primarily for marketwatch.com on-the-go readers.
  • Pacifica: Pacifica is a mental health app that offers numerous ways to handle your stress. It offers amazing tools such as the ability to track user’s mood throughout the day, listen to audio exercises, daily challenges, etc.
  • Sworkit: Sworkit is an app based on Ionic, a cross-platform development framework, so it is compatible with both Android and iOS devices. Sworkit includes a wide range of exercises just about anywhere, with no equipment. We can choose the length of workout, from 5 minutes to an hour, and the app fills that time with the type of exercises you requested.
    JustWatch: JustWatch is the streaming search engine app designed to find legally available content from today’s most popular services. It helps you to watch movies and shows, also discover new and popular content across a variety of services, including platforms like Hulu, iTunes, Netflix, HBO NOW, Amazon Video and many other.
  • Joule - Sous Vide: Sous vide is a method of cooking in which food is placed in a plastic pouch, and then put in a water bath or steam environment for longer than usual cooking times. This interesting cooking technique produces results that are impossible to achieve via any other cooking method.
  • McDonald’s Türkiye: This app is basically a food ordering app, which can also bring you some tasty deals and promotions of McDonald’s.
  • ChefSteps: This app was one of the first apps developed with Ionic. ChefSteps is a high-tech cooking based company committed to changing the way people cook.
  • Untappd: Untappd is a beer-centric social network app which enables users to discover new beers and see what everyone else is also drinking. At the top of each screen, there are five icons showing the activity feed, search nearby, find friends, view profile and notifications.

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.

AngularJS and Ionic create an excellent combination in the field of application development. All mobile application play stores are built using this combination. Ionic provides dozens of components with diverse functionalities. The JS portion of hybrid mobile application development is possible to create with the help of AngularJS and Ionic itself is developed using Angular 1.0. Similarly, Ionic 2 works in the combination of Angular 2.0.

  • Mobile UI with Ionic: 

Ionic web standard recommends that which Ionic application will fit into your front-end stack from tablet to mobile to desktop as Ionic is one phase with more than twelve supportive extensible choices as well as parts. In a simple term, Ionic is rather rapidly making a group of AngularJS stimulated libraries that makes building mobile applications with Angular limitlessly simple yet quick. I any, either way, you can’t neglect Ionic.

  • Single Application for Multiple Platforms:

Ionic has its own library of optimized JS, HTML and CSS tools as an Ionic platform is developed on AngularJS along with Sass. Tedious coding and developing processes have been discarded through Ionic. Push a single code, and your web application will be able to perform over different platforms. Any application built using a combination of these two can be accessed through Play Store. Creating a customized, interactive and user-friendly application has now become so simple and easy because Angular is advancing Ionic platform.

  • Enhanced Development:

Ionic is the most comprehensive open-source SDK available for developing hybrid applications. Till the date, 4 Million programmers are using the Ionic framework and there are about 2 million+ application built with Ionic. Almost all the hybrid developers complain regarding iterative efforts required to make splash icons and screens, but Ionic makes this task comparatively easier. Ionic streamlines the development task for developers that is all due to the power of AngularJS.

  • Performance of Ionic Apps:

Very few hybrid applications are known for their performance; however, Ionic has optimized UI components with Crosswalk in the CLI to ensure the smooth performance across various platforms. Fortunately, mobile application developers can have faith to build complex applications using a hybrid mobile application development platform.
There are varied numbers of benefits using AngularJS in a combination of ionic. One of the most significant and potential benefits of using Ionic is to support web developers community to build mobile application effortlessly.

This is a common yet one of the most important Ionic framework interview questions and answers for experienced professionals, don't miss this one.

There are a few built-in colours that come with every Ionic project. As a beginner we will be curious to know how those colours are programmed. Below are the instructions for same. 

  1. In Ionic project navigate to project/src/theme/variables.scss folder. 
  2. Here there will be a variable named $colours which will contain the various different colours names and their equivalent hexadecimal colour codes.
  3. One can change the colour codes for the default colours also they can add new colour names and hexadecimal code for it.

It is recommended to store the theme colour of the app here. So that you can use it throughout the app and in case if the theme needs to be changed on some occasion, then you can just change it here, the entire app gets updated.

Since Ionic 1-3 are majorly dependent on Angular. The Compilation options that were available for Angular were available for Ionic too. I have mentioned them below.

  1. JIT stands for Just in Time compiler. It is a type of compilation where a compilation of the app happens in the browser at runtime.
  2. AOT stands for ahead of time compiler. It is a type of compilation that compiles the app at build time.
  3. If we just use ionic cordova build platform (android or iosthen it will be JIT if we use prod flag I, E ionic cordova build platform --prod then it will use AOT.

An app that is built with JIT is slow as compared to AOT. But compilation time required for AOT is more than JIT. So for a quick checks use JIT and for a final deployment use AOT.

Debugging is one of the crucial parts of any development. W.r.t to Ionic We can debug Android and iOS apps on Chrome or Safari Browser.

  • Android: To debug an Android app in real time, we need to follow below steps.
    • Enable developer mode on Android Mobile.
    • Run the app on the real device either by running ionic Cordova run android or build the apk by running ionic Cordova build android and transfer it to the phone.
    • Connect device to your computer with a USB cable and lunch Google Chrome browser and open URL chrome://inspect/#devices which will display your phone and app name. Click on inspect there.
    • Now you will be able to inspect the app and check the logs.
  • iOS: To debug the iOS app in real-time, we need to follow below steps
    • Run the app on the device by executing command ionic Cordova run-ios or build the app with ionic Cordova build ios and Xcode to launch the app on the phone.
    • Now open safari browser -> windows -> Enable developer options.
    • Now open developer -> Your phone -> localhost, now you will be able to debug the app in real-time.

Intermediate

Ionic does not provide a camera API. However, since Ionic uses plugins architecture, and it is based on Cordova, we can use Cordova plugins in our application. The ionic team supplies a set of Cordova extensions with Angular wrappers which can be found at ngCordova. To be able to use Cordova plugins, we need to install the plugin using Ionic command install <plugin name>. In some cases, we additionally need to add the plugin’s Angular module to your Angular application. To use a mobile phone’s camera app in the Ionic application, we can call the camera API by using cordova-plugin-camera that is hosted on GitHub. Now, this plugin defines a navigator.camera object which provides  API for taking pictures and for choosing images from the system’s image library.

Expect to come across this, one of the most important Ionic interview questions and answers for experienced professionals in app development, in your next interviews.

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. 

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.

If you want to get advanced mode, you can open up the project file for a specific platform by opening the required XCode or Android Eclipse project in platforms/PLATFORM inside the root of your project. Then, you can build and test from the platform-specific IDE. Note: if you go this route a suggestion to work inside of the root www folder, and when you've made changes to this folder, run the command: $ cordova prepare ios which updates the iOS-specific project with the code from the www folder. Note: this will overwrite any changes made to the platforms/ios/www and other platform-specific folders.

So, to summarize this part - if you're using XCode to test and run your code after you change some part of the code you just have to run ionic prepare to update the iOS project which again you can continue to use in XCode.  ionic buildcommand actually prepares the final (for example in Android it's the .apk file) file which then could be copied to your device and test by running it manually on the device (or by using the ionic emulate command to test it on the emulator).

Ionic pages are usually converted into an Angular component as we are aware Ionic frame is built on top of Angular. Just like Angular frameworks has its lifecycle hooks which we follow during the development of Web Application. Also, lifecycle events for ionic framework help in capturing and performing some specific task. 

  • ionViewWillEnter: This event is fired when component routing is about to animate into view. i.e ionViewWillEnter() lifecycle function signifies that all the process to make your page in full view and transitioned in is about to begin and your page has been queued to be pushed into view.
  • ionViewDidEnter: When this event is fired, your page is completely loaded and completely available to view alongside the animation. In other words, this event is fired when the component routing have finished.
  • ionViewWillLeave: This event is fired when your page gets the information of getting out from the active state of the page but, it is still in the active state only. In other words, we can say that this event is fired when the component routing from is about to animate. This kind of event is useful to start preparing for the things for the next view before navigating.
  • ionViewDidLeave: This event is fired when the component routing to has finished animating. Now, this event indicates that your ionic page is no longer in focus and leave the active state of the page. Also, this event is fired after the ionViewDidEnter event. This kind of events is fired to free up the memory resources.         

As we have discussed important lifecycle events of ionic other than this there are some more lifecycle events which would prevent unauthorized access of users.       

  • ionViewcanEnter: which is fired before entering into a view, allows you to control whether the view can be controlled or not by the user.
  • ionViewCanLeave: which is activated before leaving a view which allows you to control whether the view can be left or not by the user.

In Ionic 4 the above mention two events can be replaced with Routing Guards. 

Headers are fixed regions at the top of the screen which might consist of title label and left or right buttons to it providing navigation or to provide various actions. The ionic header bar is implemented to build header on the application. The bar class is the main class with bar-header used for creating header bar in-app.

Ionic header bar code

A must-know for anyone looking for top Ionic interview questions, this is one of the frequently asked conceptual questions on the topic.

Footer is a root component of a page located at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized properly. Ionic footer bar is implemented to build footer on the application. The bar-footer class is used for creating a footer bar in the app.

Ionic footer bar code

Ionic framework is a framework for developing mobile applications using HTML5, CSS and Javascript that UI and it looks like native UI components. It targets multiple platforms like Android, iOS, Windows with single code base so web application developers can create their own mobile apps. Ionic is built on top of an Angular framework. Ionic comes inbuilt electron support where an electron is a new open technology for building traditional desktop apps using web technologies. Ionic and Angular framework is completely built from scratch offering better. 

Hybrid Application is one that both native and Web Applications. Native Applications are developed for a specific platform and installed on a computing device. Web Applications are developed for multiple platforms and not installed locally but made available through the internet. Hybrid apps are usually mentioned in the context of mobile computing. Hybrid mobile apps are developed with a combination of web technologies like HTML, CSS, and Javascript. The key difference is that hybrid apps are hosted inside a native application that uses mobile platform’s web view. Right now most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of Javascript APIs to access device capabilities through plugins which are built with native code. 

$ionicBackdrop performs shows and hides backdrop over UI. Appears behind popups, loading, and other overlays. Usually multiple UI components require a backdrop but only one backdrop is needed in DOM. Each component which requires backdrop to be shown calls $ionicVackdrop.retain() when it wants to backdrop then $ionicBackdrop.release() when it is done with the backdrop. Method $ionicBackdrop.retain() and $ionicBackdrop.release() is used for backdrop. $ionicBackdrop.retain() is used to apply overlay over the content. $ionicBackdrop.release() is used to remove Ionic Backdrop from content. Each time when $ionicBackdrop.retain() is called $ionicBackdrop.release() method is called.

Ionic uses Cordova and Capacitor plugins to gain access to host operating systems features such as Camera, GPS, Flashlight, etc. Users can build their apps, and they can then be customized for Android, iOS, Windows, Desktop (with Electron_(software_framework), or modern browsers. Ionic allows app building and deployment by wrapping around the build tool like Cordova or Capacitor with a simplified 'ionic' command-line tool.

The ionic framework includes mobile components, typography, interactive paradigms, and an extensible base theme. Other than the SDK, the Ionic framework also provides services that developers can use to enable features such as code deploys, automated builds. The ionic framework also provides its own Integrated_development_environment known as Ionic Studio.

Don't be surprised if this question pops up as one of the top interview questions on Ionic framework in your next interview. 

Ionic is an open-source SDK for developing hybrid mobile app developed from three minds of Max Lynch, Ben Sperry and Adam Bradley in 2013. The original version was first launched in 2013 and built on top of AngularJS and Apache Cordova. The latest version was re-built as a set of Web Components, allowing users to choose any UI framework like Angular, React or Vue.js. It also permits the use of Ionic components with non UI framework. The main factor of Ionic is providing tools and services for developing hybrid mobile, desktop and Web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. Mobile apps can be built with these Web technologies and allowed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

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).

Ionic is by far one of the most popular and best frameworks available for developing hybrid apps. The new features basically revolve around performance, build time improvements, multi framework compatibility, new documentation. The newer update provides a tool through which it can be easily migrated.

  1. Web Components: Ionic has moved to a web component for every single component. Web component is a set of web platform APIs which allows developers to build new customized and reusable HTML tags for web apps and web pages. Web components forward its work process to browsers without the need to write plenty of code making a significant improvement in startup and load time and essential for building high-performance apps. 
  2. Capacitor: It is a cross-platform API and code extension layer which eases up to call native SDKs from web code and write custom native plugins which are required for the app. It also entails PWA support to enable the developer to write one app and launch it to the app stores. 
  3. Stencil: Its a new web component compiler developed to build the standards which are compliant the web servers. It makes use of additional API like virtual DOM, Typescript, JSX, async
  4. ion-Backdrop: These are full-screen components which overlay over other components. They are placed on top of other components so it can dismiss it.

For most modern JS libraries like React, Vue, Angular etc. They need a centralised place to manage the different plugins and packages that the project uses. Package.json is mainly used for that reason.

Package.jsonPackage-lock.json
It records the minimum version of the package that the project needs. If we update packages to the latest version, that will not have any effect on package.json.It records the exact version of each installed package which allows you to re-install them. Future installs will be able to build an identical dependency.
The package.json is used for more than dependencies - like defining
project properties, description, author & license information, scripts, etc.
The package-lock.json is all about the packages. And locking them to a particular version.
We cannot build an Ionic project without this file.We can build an Ionic Project without this.

For every mobile app, it is very essentials to transfer its state between the components or pages. Ionic has few ways of doing it, which is listed below.

  • Using NavigationController: In Ionic 2 and 3 we can use the Navigation controller to pass data between the pages.
    • Ex: If we have to travel between Page A to Page B, below code can be used to navigate and transfer the data.
    • this.navCtrl.push(B, {name: ‘test’}) Where navCtrl is an object of NavigationController.
    • To get the value of name on Page B below code is used.
    • this.navParams.get(“name”) where navParams is an object of NavParams.
  • Using services: You can use a common service to transfer data between multiple pages.
    • Say you create a service named base and it has a variable name and email.
    • Page A can set the value of the variable by using this.base.email
    • Page B can access this variable by this.base.email whatever the value set by Page A can be used by Page B.
    • Complete code snippet:

1. Base service

@Injectable()
export class BaseProvider {
email:any;
}

2. Page A

import { BaseProvider } from "YOUR_PATH";
@IonicPage()
@Component({
  selector: 'page-A',
  templateUrl: 'a.html',
})
export class a {
    constructor(private base: BaseProvider){
        this.base.email = "test@test.com"
    }
}

3. Page B

import { BaseProvider } from "YOUR_PATH";
@IonicPage()
@Component({
  selector: 'page-A',
  templateUrl: 'a.html',
})
export class a {
    constructor(private base: BaseProvider){
        console.log(this.base.email)  //whatever set on page A can be accessed here
    }
}

One of the most frequently posed Ionic framework interview questions, be ready to answer this conceptual question.

One of the important areas which would majorly affect the performance of the app is network calls. It should be tuned to the highest accuracy to make the app perform better.

  1. If two different components trying to make an HTTP call to the same URL means, it is better to make a single call and send data to both the components, rather making two different HTTP calls. The provided request is done in a gap of few seconds.
  2. Best way to achieve this is using a root component. All the components making an HTTP call should go with a common root component. Which keeps track of the URLs that have been requested a few seconds back, if same is requested again, then it can add a  minimum delay and once response comes, it can send it to both the components.

Observable and promises are used to execute asynchronous tasks in Ionic. For Ex: Making network calls, Checking the internet connection etc.

ObservablePromise
Computation does not start until subscription so you can run then only when you need the resultExecute immediately after creation
Provide multiple values over timeProvide only one
Subscribe method is used for error handling which makes centralized and predictable error handlingPushes errors to the child promises
Provides chaining and subscription to handle complex applicationsUses only .then() clause
  • Example of Promise and Observable

i. Promise

var promise = new promise((resolve) => {
    setTimeout(() => {
        resolve(42)
    }, 500)
    console.log("Promise started")
})
promise.then(data => console.log("Output", data))

ii. Observable

var observable = Rx.Observable.create((observer) => {
    setTimeout(() => {
        observer.onNext(42)
    },200)
    console.log("Observer started")
})
observable.forEach(x => console.log("Output is x))

Async and await are used to execute asynchronous code blocks. The main reason they are used is to increase the readability of the code. 

a. Say there are 2 network calls that need to be done one after the other, we can achieve it using async and await with below code snippet. 

i. async addWithAsync() {

    const result1 = <number>await this.networkCallOne(20);
    const result2 = <number>await this.networkCallTwo(30);
    this.additionAsyncResult = result1 + result2;
    console.log(`async result: ${this.additionAsyncResult}`);
  }

ii. In the above code, until first line executes control will not come to second line. If we try to achieve the same promises or observable, we need to write code, as mentioned below. 

iii. addWithPromise() {

  this.networkCallOne(20).then(data1 => {
      let result1 = <number>data1;
      this.networkCallTwo(30).then(data2 => {
        let result2 = <number>data2;
        this.additionPromiseResult = result1 + result2;
        console.log(`promise result: ${this.additionPromiseResult}`);
      });
    });

iv. With above code pattern when hierarchy increases, the readability of the code decreases. 

A staple in Ionic concepts interview questions and answers, be prepared to answer this one using your hands-on experience.

Advanced

src/app/tabs/ folder will have a tabs.router.module.ts file. Similar to Angular app routing module , routes can be configured for tabs in this file. 

Routes can be configured for tabs as below : 

const routes: Routes = [ 
{ 
path: 'tabs', 
component: TabsPage, 
children: [ 
{ 
path: 'tab1', 
children: [ 
{ 
path: '', 
loadChildren: '../tab1/tab1.module#Tab1PageModule' 
} 
] 
}, { 
path: 'tab2', 
children: [ 
{ 
path: '', 
loadChildren: '../tab2/tab1.module#Tab2PageModule' 
} 
] 
}, { 
path: 'tab3', 
children: [ 
{ 
path: '', 
loadChildren: '../tab3/tab3.module#Tab3PageModule' 
} 
] 
}, { 
path: '', 
redirectTo: '/tabs/tab1', 
pathMatch: 'full' 
} 
] 
} 
]; 

This is one of the most frequently asked Ionic interview questions for freshers in recent times. Make sure you go through the solution carefully.

A staple in Ionic developer interview questions with answers, be prepared to answer this using your hands-on experience. This is also one of the top interview questions to ask an Ionic developer. Here is a sample answer.

Generate a service first using ionic generate service command. Import HttpClient from @angular/common/http library. Then add HttpClient to constructor so it can be used in the service. A typical get and post request can be written as follows : 

get(endpoint: string, params?: any, options?: RequestOptions) { 
if (!options) { 
options = new RequestOptions(); 
} if (params) { 
let p = new URLSearchParams(); 
for (let k in params) { 
p.set(k, params[k]); 
} options.search = !options.search && p || options.search; 
} return this.http.get(this.url + '/' + endpoint, options); 
} post(endpoint: string, body: any, options?: RequestOptions) { 
options = new RequestOptions(); 
options.headers = this.createHeaders(); 
return this.http.post(this.url + '/' + endpoint, body, options); 
} 

Ionic 4 being based on Angular 6 / 7 , the application when created comes with a unit testing framework named Jasmine. It is automatically set up up to unit test the application. Unit tests are contained in .spec files which are created for every component, page, service , pipe, guard etc. The spec file contains a single describe call that defines the overall test. 

Each describe call can contain setup and teardown code through before Each and after Each calls. Finally, it calls define individual test cases. 

Below snippet shows a sample spec.ts file for a page. 

describe('Tab1Page', () => { 
let component: Tab1Page; 
let fixture: ComponentFixture<Tab1Page>; 
beforeEach(async(() => { 
TestBed.configureTestingModule({ 
declarations: [Tab1Page], 
schemas: [CUSTOM_ELEMENTS_SCHEMA], 
}).compileComponents(); 
})); 
beforeEach(() => { 
fixture = TestBed.createComponent(Tab1Page); 
component = fixture.componentInstance; 
fixture.detectChanges(); 
}); 
it('should create', () => { 
expect(component).toBeTruthy(); 
}); 
}); 

Slides is a UI component. This component is used as a container for layouts such as photo galleries, tutorials, questionnaires etc. A slides component can have one or more slides. User can swipe or drag to move to next slide. 

Below is a brief example. Add the two functions to component.ts file and the html markup to view. 

genderUpdate(gender) 
{ 
if(gender == "M" || gender == "F") 
{ 
this.iGender = gender; 
this.slides.lockSwipes(false); 
// let currentSlide = this.slides.getActiveIndex() + 1; 
this.slides.slideNext(); 
this.slides.lockSwipes(true); 
} 
} ageGroupSelected(event) a
{ 
if(event) 
{ 
this.ageGroup = event; 
this.slides.lockSwipes(false); 
this.slides.slideNext(); 
this.slides.lockSwipes(true); 
} 
} <ion-slides> 
<ion-slide lockSwipeToNext="false"> 
<button ion-button color="danger"> Select Your Gender </button> 
<ion-card class="genderIcon" (click)="genderUpdate('M')" color="danger"> 
<ion-card-header> 
<ion-card-title> Male </ion-card-title> 
</ion-card-header> 
<ion-card-content> 
<ion-icon name="man"></ion-icon> 
</ion-card-content> 
</ion-card> 
<ion-card class="genderIcon" margin-top (click)="genderUpdate('F')" color="danger"> 
<ion-card-header> 
<ion-card-title> Female </ion-card-title> 
</ion-card-header> 
<ion-card-content> 
<ion-icon name="woman"></ion-icon> 
</ion-card-content> 
</ion-card> 
</ion-slide> 
<ion-slide lockSwipeToNext="false"> 
<ion-list radio-group [(ngModel)]="ageGroup" (ionChange)="ageGroupSelected($event)"> 
<ion-list-header class="headTitle" color="danger"> 
My Age Group is 
</ion-list-header> 
<ion-item> 
<ion-label color="primary"> 0 - 17 </ion-label> 
<ion-radio value="child"></ion-radio> 
</ion-item> 
<ion-item> 
<ion-label color="primary"> 18 - 100 </ion-label> 
<ion-radio value="adult" ></ion-radio> 
</ion-item> 
</ion-list> 
</ion-slide> 
</ion-slides> 

To create a button, we can use ion-button component. Ion-button comes with few attributes like fill , size, shape , color. 

  • Fill attribute can have one of these three options - solid, outline or clear. Choose solid when you want to fill the background color, choose outline when you want only a thin border around the button without background color and choose clear when you don’t want any background color or border. Since the requirement is to have an outline, we shall use fill=”outline” . 
  • Size attribute specified size of the button. Basically , you specify size when you want the button to be small, large or default. 
  • Shape attribute is used when you want the button to have rounded corners. By default , buttons are rectangular in shape but you can have rounded corners by adding shape=”round” attribute to the markup. 
  • Color attribute can be used to apply one of the preset themes available with Ionic. Ionic has nine default colors that can be used to change the color of UI components. Each color is a collection of multiple properties, including a shade and tint, used throughout Ionic. The options for color attribute are primary, secondary, tertiary , success, warning, danger , light , medium and dark. 

So, to create a button with rounded corners and outline without any background color, the markup would be as below : 

<ion-button color=”primary” fill=”outline” shape=”round”> Submit </ion-button>

Tabular data can be shown in a responsive manner using ion-grid UI component. 

Below example displays 6 column layout for extra large screens (xl, min-width 1200px), 4 column layout for large screens (lg, min-width: 992 px), 3 column layout for medium size screens(md, min-width:768px) , 2 column layout for small screens(sm, min-width:576px) and single column layout for extra small screens (xs, min-width:0). 

<ion-grid> 
<ion-row> 
<ion-col size=12 size-xl=2 size-lg=3 size-md=4 size-sm=6 size-xs=12 *ngFor="let item of 
['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; let i = index"> 
<ion-badge slot="start"> {{i}} </ion-badge> 
<ion-label> {{item}} </ion-label> 
</ion-col> 
</ion-row> 
</ion-grid> 

One of the ways to integrate google login in an ionic app is by using Cordova and Ionic Native plugins. 

Run following two commands to install the plugins 

ionic cordova plugin add cordova-plugin-googleplus --variable 
REVERSED_CLIENT_ID=yourreversedclientid 
npm install --save @ionic-native/google-plus 

Add google-plus plugin to your app.module.ts file as below 

import { GooglePlus } from '@ionic-native/google-plus'; 
Add GooglePlus in providers list in app.module.ts. 
Import GooglePlus plugin and make it available in your component's constructor 
import { GooglePlus } from '@ionic-native/google-plus'; 
constructor( private googlePlus: GooglePlus) { 
} Sample Code 
this.googlePlus.login({}) 
.then(res => console.log(res)) 
.catch(err => console.error(err)); 

The command ionic g module creates a folder of same name as module and creates the module within the new folder. To skip creating new folder , use --flat  option which will create the module directly in src/app folder. Below command will create test.module.ts file in src/app/ . ionic g module test --flat.

Offline mode means users can still use the app when network connection is lost. This can be done by caching API data so that it can be used later and a network service to detect when your network is lost or available. 

To make your app work in offline mode, you need to create an offline manager service which stores requests made during that time so that we can send the requests when network is available. 

For this , ionic has the ionic/storage and ionic-native/network modules. The Network module provides onConnect() and onDisconnect() events which can be used to track network changes. 

Normally, the simplest way to import a component in a page or another component is by importing it in the module file. But we cannot import a custom component in two separate modules as it will raise an error alert. So, in order to reuse a custom component like a header or footer component, you can import the custom component in a separate module and then import the module in the target page’s module file. 

Here’s an example. 

Create the component as below ng g component components/site-header. Now create a file custom-components.module.ts in src/app/ 

Add this code - 

import { NgModule } from '@angular/core'; 
import { SiteHeaderComponent } from './components/site-header/site-header.component'; 
@NgModule({ 
declarations: [SiteHeaderComponent], 
exports: [SiteHeaderComponent] 
}) export class CustomComponentsModule{} 
Now import this module in the module file of the page where you want to import 
the header component - 
import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { Routes, RouterModule } from '@angular/router'; 
import { IonicModule } from '@ionic/angular'; 
import { CategoryPage } from './category.page'; 
import { CustomComponentsModule } from './../custom-components.module'; 
const routes: Routes = [ 
{ 
path: '', 
component: CategoryPage 
} 
]; @NgModule({ 
imports: [ 
CommonModule, 
FormsModule, 
IonicModule, 
CustomComponentsModule, 
RouterModule.forChild(routes) 
], declarations: [CategoryPage] 
}) export class CategoryPageModule {} 
Load the component by adding it’s selector in the page’s view . 
<app-site-header></app-site-header> 
<ion-content padding> 
<H3> Category Page </H3> 
</ion-content> 

Cloud FireStore is a NoSQL Document based database from Firebase. It keeps the data in sync across client apps through real-time listeners and offers offline support for mobile and web. Using Firestore, we can directly update data from the app. 

1. To use firestore, first create a project on https://firebase.google.com. Then add FireStore to the project. 

2. Add the config settings to your ionic app’s environment file as below : 

export const environment = { 
production: false, 
firebase: { 
apiKey: "your-api-key-goes-here", 
authDomain: "project.firebaseapp.com", 
databaseURL: "https://project.firebaseio.com", 
projectId: "projectid-here", 
storageBucket: "project.appspot.com", 
messagingSenderId: "msging-id-here" 
} 
}; 

3. Add Firebase and AngularFire2 to your ionic project with this command 

npm install firebase angularfire2 --save 

4. create a page and add a service to your project 

ionic g page pages/categorylist 
ionic g service services/category 

5. Import AngularFire and AngularFirestoreModule in your app.module.ts file and add to  NgModule 

import { AngularFireModule } from 'angularfire2'; 
import { environment } from './../environments/environment'; 
import { AngularFirestoreModule } from 'angularfire2/firestore'; 
@NgModule({ 
declarations: [AppComponent], 
entryComponents: [], 
imports: [BrowserModule, IonicModule.forRoot(),FormsModule, 
HttpClientModule, AppRoutingModule, BrowserAnimationsModule, 
AngularFireModule.initializeApp(environment.firebase), 
AngularFirestoreModule], 
providers: [ 
StatusBar, 
SplashScreen, 
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } 
], bootstrap: [AppComponent] 
})

6. Import AngularFirestore and AngularFirestoreCollection in your service . 

import { AngularFirestore, AngularFirestoreCollection } from 
'angularfire2/firestore'; 

7. Initialize db connection in constructor of service file and fetch data in real time from firestore collection with snapshotChanges() function. Also write a get function to return the output. 

constructor(private http:HttpClient, db: AngularFirestore) { 
this.categoryListCollection = db.collection<any>('category'); 
this.categoryList = this.categoryListCollection.snapshotChanges().pipe( 
map(actions => { 
return actions.map(a => { 
console.log(a.payload.doc.data()); 
const data = a.payload.doc.data().categoryName; 
const id = a.payload.doc.id; 
return {id, data}; 
}); 
}) 
); 
} getCategoryList() { 
return this.categoryList; 
} 

8. Now import the service in your page and subscribe to the get function. 

ngOnInit() { 
this.expenseService.getCategoryList().subscribe(res => { 
this.categoryList = res; 
}); 
} 

9. Run a ngFor loop through the recordset in your view to display live data 

<ion-list> 
<ion-item *ngFor="let category of categoryList"> 
{{category.data}} 
</ion-item> 
</ion-list> 

This is one of the most frequently asked Ionic interview questions and answers for freshers in recent times. Keep a close eye on the steps mentioned above.

Description

The ionic framework is an open source UI toolkit used for building high-performance mobile, desktop apps, and progressive Web Apps using web technologies (Javascript, CSS, and HTML). The ionic framework is used by the world’s best-known brands like Untapped, Sworkit, Dow Jones MarketWatch, NASA. Currently, it has precise integration with Angular, but support for React and Vue are in development.

Ionic enables to use one codebase to build apps for various platforms. Today, the total number of Ionic-built apps exceeds 4 million. This framework doesn’t support apps for huge brands like Facebook or Instagram.

Developers are crazy about Ionic, as it enables them to use one codebase to build apps for various platforms. The total number of Ionic-built apps exceeds 4 million. Although this framework is not able to support apps for huge brands such as Instagram or Facebook, Ionic developers are continuously building high-quality apps, thus broadening the overall presence of hybrid apps on the highly competitive market. This article brings you the list of 10 interesting apps built with Ionic, which showcases the potential that this hybrid mobile app framework possesses.

Ready to face interview for Ionic? Do not worry, we are here to help you with job interview preparation. If you are preparing for Ionic job interview and not sure which questions are likely asked in interview, we suggest you to go through these Ionic interview questions and answers to crack your job interview. Many organizations use this framework to develop apps. There are many jobs related to this across the globe.

We’ve brought you a list of most frequently asked Ionic framework interview questions along with the answers which your interviewer expects at the time of Ionic interview. Ionic interview questions and answers have been designed specially to get you familiarized with the nature of the questions.

Learning and practicing these Ionic framework interview questions will help you to land your dream job. Ionic interview questions and answers here will surely boost your confidence to face interview and will definitely prepare you to answer the toughest of questions in the best way. So, in order to succeed in the Ionic interview you need to read and re-read these Ionic interview questions and answers.

Do keep visiting these interview questions on Ionic framework which will enable you to crack your upcoming interviews easily.

All the best for your upcoming Ionic interview.

Read More
Levels