IONIC Framework Interview Questions

IONIC Framework Interview Questions | Freshers & Experienced

  • Brian
  • 15th Apr, 2021
  • 320 Followers

Key Features of Ionic Framework

Below are few major features of Ionic Framework

Cross-platform

Web Standards-based

Beautiful Design

Simplicity

Cordova Plugin

License

IONIC CLI

Framework Compatibility

Java Script Components

IONIC Framework Interview Questions

Q1. What is Ionic?

Ionic framework is an open-source software development kit for developing highly performant mobile and desktop apps. Web technologies such as HTML, CSS, and JS are used to enhance the front-end user experience.

Ionic framework is focused on a UI interaction of an app that includes controls, interactions, gestures, and animations. Along with that, it can easily integrate with other frameworks or libraries such as Angular and React just by including a simple script.

Q2. What's new in IONIC 4?

The new features added in Ionic 4 are:

  • Web Components: One of the greatest features in Ionic 4 is that every single component starts with a web component.
  • Stencil: The Stencil is a web component compiler that utilizes additional APIs like TypeScript, Virtual DOM, JSX and async for PWA.
  • ion-Backdrop: Ion-Backdrops are the full-screen components that are used to dismiss the other component. These components do this by superimposing other components.
  • Ion-Picker: The function of this property is to display a row of buttons and columns on the top of the application and also at the bottom-most part of the viewport. ion-Ripple Effect: This effect adds material design ripple interaction effect. It is very efficient and can be used without adding extra DOM to the elements.
  • Color Changes: There is some new default color has been added.
  • ion-select Popover: It is used for overflow actions that don't fit properly in the navigation bar and it appear on the top of the current page.
  • CSS variable: These features make some vulnerable changes in the variable and change the entire look of the app without even using the build tool.

Q3. Enlist the requirements of installing Ionic?

The main purpose of Ionic is to build apps for Android as well as iPhone. For that, you need to install the following software and setup on your computers. After that, you will be able to build a hybrid build app with the use of the Ionic Framework. The minimum requirements of Ionic are:

  • Node Package Manager (npm)
  • Git Bash
  • Ionic CLI & Apache Cordova
  • IDE - Visual Studio Code
  • Android SDK

Q4. List major advantages of using Ionic?

Major advantages of using Ionic

  • Easy to adopt: It is very easy to use an Ionic framework if you are familiar with the CSS, HTML, JavaScript. If the companies need hybrid application development then they can easily switch to Ionic.
  • Cross-platform app development: The ionic framework supports a lot of mobile versions like Android 4.1 and up, iOS 7 and up. Moreover, it supports the UWP to develop windows apps. A lot of users use Ionic to build applications quickly.
  • User Interface: Themes and components of Ionic are highly customizable. Besides, the ionic platform also enables the components to adapt to the platform on which the application is running.
  • Built on AngularJS: As Ionic is built on AngularJS which is a very fascination framework, it enables Ionic to give a strong structure that makes the code more manageable. It allows the development of hybrid applications more efficiently.
  • Cordova Plugins: As the Ionic utilizes the Cordova plugin, users can now access different components. Designers can now access features like Camera, GPS, Flashlight and others. Developers utilize these modules to make their application more fascinating.

Q5. Ionic Framework developed by whom?

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

Q6. Enlist some popular apps built with Ionic Framework?

The following apps are built with the use of an Iconic framework:

  • MarketWatch
  • Pacifica
  • Sworkit
  • JustWatch
  • Joule: Sous Vide by ChefSteps
  • McDonald's Türkiye
  • ChefSteps
  • Untappd

Q7. How many types of storage is available in IONIC?

The easy and effective way to store key or value and JSON object are called storage in Ionic framework. There are several types of storage in the Ionic framework that are listed below: -

  • HTML5 local storage
  • Cookie and session storage
  • IndexedDB
  • WebSQL
  • PouchDB
  • Web service/API storage
  • Cordova storage.

Q8. How to get the installed version of the Ionic framework?

It is very easy to get the installed version of the Ionic framework. You can do it just by running the ionic version in the console of your web browser.

Q9. How to use observables in an Ionic framework?

Q10. How to parsing of JSON is done in Ionic?

Q11. What is maxLength of ion-input?

Q12. What is a Web View in Ionic?

Ionic use web technologies to build the apps and are rendered with the help of Web Views which are a full screen and full-powered web browser. Web apps are powered by the Web View in native devices. The plugin is provided a default for those apps that are integrated with Cordova in Ionic CLI which is managed by the Ionic.

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

Difference between PhoneGap, Cordova, and Ionic

PhoneGap, a distribution of Apache Cordova, allows you to use web technologies such as CSS3, HTML5, and JavaScript for the development of cross-platform applications. In short, it is a web platform that presents native mobile device apps and data to JavaScript.

Apache Cordova is an open-source mobile development framework that enables developers to build cross-platform mobile apps. You can also use web technologies like HTML5, JavaScript, and CSS to develop a Cordova app.

Ionic is an open-source front-end framework for building cross-platform apps with the use of web technologies such as Angular and React. For developing highly interactive apps, Ionic provides a library of mobile and desktop-optimized CSS, HTML and JS components.

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

Ionic works with AngularJS and UI-router. In other words, you can use either Angular services or UI-router’s state resolve to pass data from one view to another.

As UI-router gives a resolve configuration. For instance:

$stateProvider
    .state('todos', {
        url: '/todos',
        controller: 'TodosCtrl',
        templateUrl: 'todos.html',
        resolve: {
            todos: function(TodosService) {
                return TodosService.getTodos()
            }
        }
    })

Q15. How can you test an Ionic applications?

As you know, ionic apps are built with the help of AngularJS. Angular is a good source of test libraries and frameworks like Jasmine and Karma test runner. Users can utilize these frameworks to write unit tests for Ionic applications. For the analysis in the browser, Ionic -CLI gives a live reload feature. Therefore, we can use browsers like Mozilla Firefox or Chrome Developer Tools with Firebug to debug and examine Ionic applications.

Q16. What are capacitor in Ionic?

A capacitor is a cross-platform app that facilitates the task to build web apps that run natively on iOS, Android, Electron, and the web. Capacitor offers a stable, web-focused set of APIs that enable an app to remain close to web standards.

Q17. Which programming language is used in ionic framework to create Apps?

Ionic uses web technologies like HTML, CSS, JavaScript, Angular, and TypeScript to create applications.

Q18. How do you create an ionic project?

To create a Project is Ionic simply follow the below steps

  • Open a new terminal window (Mac) or a command window (Windows), and navigate (cd) to the ionic-tutorial directory.
  • Using the Ionic CLI, create an application named firstApp based on the sidemenu starter app:
    ionic start firstApp sidemenu
    
  • Navigate to the firstApp folder
    cd firstApp
    
  • Run below command to start the server.
    ionic serve
    

Q19. How to create session in ionic?

A session is created in Ionic by instantiating the session variable.

Q20. What is Ionic Capacitor?

The capacitor is a cross-platform API and code layer developed by the Ionic framework team as an alternative to the Cordova. The capacitor is used to call the Native SDKs from the web code and with that, you can write native plugins for your application.

The capacitor has first-class swift support, and objective – c support for writing plugins. On the Android side, it has the support for the plugin to be written in java and Kotlin. The capacitor also supports the Progressive web applications. So, you can write one app with the capacitor and release it in all the app stores and the web.

Q21. What are pros and cons of ionic framework?

Advantages of using the Ionic framework

  • It provides a single codebase to develop applications in all the platforms as it is supported by all the major platforms like android, iOS, and web.
  • As it is supported by all the platforms, it reduces the cost of development of the apps and makes faster app learning.
  • The development process uses ionic involves mainly HTML, CSS, and JS. It is easy to learn and also well known by most of developers around the world.
  • The ionic framework can be integrated with many tools like security tools, testing tools, etc.
  • It has a strong community and high support for development.

Disadvantages of using the Ionic framework

  • The performance is lacking with the native application developed by the Ionic framework.
  • You need to install a specific plugin every time you develop an application. Most often suitable plugins can be found, but there is a case of absence of plugins too.
  • Ionic doesn’t support fast reloading which makes you apply changes to your app without reloading the whole app.

Q22. How to check ionic version?

The version of the ionic library can be found in two ways,

Type ionic.version in your browser console and press enter.

It will give you the version of the ionic that your system is running.

Another method is, open your bower.json file in your application. Here, the version of the ionic can be found.

Q23. Enlist major differences between ionic 3 and ionic 4?

Major differences between ionic 3 and ionic 4

  • Ionic 3

The Ionic 3 framework is developed using Angular 2. It has its own file structure and doesn’t use the command line from Angular. It also uses its own routing system.

  • Ionic 4

The Ionic 4 framework is developed using Angular 7. It follows the Angular file structure, Angular CLI, and the Angular router. Apart from this, the Ionic 4 brings the following changes to it. The Ionic 4 is developed to use the Web API’s and each component in the ionic 4 has a web component.

The ionic 4 is also completely independent from the base framework. Ionic 4 uses an Angular router which makes the navigation simple and much understandable than Ionic 3. The lifecycles in the Ionic 3 is also replaced by the Angular Lifecycles in the Ionic 4.

Q24. How to update ionic version via cmd?

To update the Ionic framework using CLI,

First, make sure you have the latest version of the npm installed on your system

Then, run the following command in your CLI to update the Ionic framework to the latest version, npm update –g cordova ionic

Q25. What is npm cordova check plugins?

Cordova check plugin is a tool to check the plugins present in the Cordova are up to date. It checks if the updates are available for the plugins. Update them if there is any. Synchronizes the installed plugin with the config.xml.

To install the tool,
npm install –g cordova-check-plugins To run it, cordova-check-plugins

Q26. What are Web Components?

Introduced in the Ionic 4, web components are a group of web APIs that is used to create reusable HTML tags that are encapsulated. With it, you can create a portable user interface that can be easily reused. Web components work on the following four components,

  • Custom elements – It defines the fundamentals to design new elements.
  • Shadow DOM – It defines how to encapsulate the code in the web component.
  • HTML imports – It defines how to reuse the HTML document.
  • HTML templates – It defines how to declare fragments of code that are instantiated at runtime.

Q27. How to rename Ionic app?

The Ionic framework application name can be changed in the config.xml file,

Go to your applications config.xml file and change the name in the tag that is responsible for your app name.

//example
<name> default name to new name //In config.xml file

Q28. What is Ionic Native?

Ionic native is a typescript wrapper that allows the developers to add native functionality for the Ionic mobile app by wrapping the Cordova or PhoneGap plugins. It wraps the callbacks in the plugin as a promise or an observable. So, it provides a common interface for all the plugins. The ionic native plugins can be installed easily into your app by using the npm installer. For e.g., to install a camera plugin. Run the following command,

npm install @ionic-native/camera@4 –save

Q29. Enlist few UI Components of IONIC?

Ionic app is made up of different types of UI components.

Some of the popular UI components are,

  • Action sheet – It is used to display a set of actions. Button – To let the user take action and navigate the app.
  • Card – It displays useful information to the user.
  • Checkbox – to make a binary decision.
  • Searchbar – used to search from a list of items.
  • Chip – used to display data in a compact way.

Q30. What is Ionic AdMob?

Ionic AdMob is a plugin for Google ads. It is supported on all the major platforms.

There are two types of AdMob,

AdMob free – It a no ad sharing version that requires Cordova to install. Npm is used to install it, npm install @ionic-native/admob-free

AdMob Pro – It is used to earn money from the ad and it takes a percentage of your earnings. To install it, npm install @ionic-native/admob-pro

About Author :

  • Author of IONIC Framework Interview Questions

    Brain Lues

    Brain Lues is Web designer and digital graphics Expert from Sydney, Australia. He has a master degree in computer science.He offer full commitment in his work , and be a pleasant and friendly team member.

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.