Ionic Framework Interview Questions and Answers

What Is Ionic Framework?

Ionic Framework is an HTML5 mobile app development framework targeted at building hybrid mobile apps.

Ionic Framework is complete open-source SDK, test, and deploy cross-platform.

Ionic Framework is created by Max Lynch, Ben Sperry and Adam Bradley in 2013 and the original version was released in 2013 and built on top of AngularJs and Apache Cordova. The recent releases known as Ionic/Ionic 3, are built on Angular.

Ionic Framework is focused mainly on the look and feel, and UI interaction of your app. That means we aren't a replacement for PhoneGap or your favorite JavaScript framework.

Ionic Framework uses Cordova plug-in to gain access to host operating systems features such as Camera, GPS, Flashlight, etc.

In short - Ionic Framework is an Angular Application with a neat set of Angular components and pre validated Cordova plug-in. And of-course Ionic framework can be used for web app also (Cordova plug-in will not work as it is for native device not for web browsers).

What Is the Current Stable Version of Ionic Framework?

Ionic 3, it was released on 24th February, 2017and it helps us to build a native mobile applications using HTML5,CSS, and JavaScript.

Ionic Framework mainly focuses on the look and feel, and the user interface of our applications.

What Are The Benefit of Ionic Framework?

The Benefit of Ionic Framework -

1.      Ionic framework is an open- source free platform

2.      Code once, run on all mobile devices

3.      One programming language for all mobile OS

4.      One source for all the supported platforms (mainly Android and OSX)

5.      Main development in HTML5, CSS and JavaScript

6.      Ionic uses Angular as the basic framework which could be used to diversify into web applications as well.

7.      Good availability of "plug-in", If you are hiring someone to build your app you'll reduce costs.

What Are The Disadvantages of Ionic Framework?

The Disadvantages of Ionic Framework -

1.      Possible performance issues depending on application type. But alternatives to PhoneGap do exist

2.      Security issue - Ionic applications may not be as secure as the native applications.

3.      Need for specialists, JS can be tricky to learn for new guys

4.      If you don't like Angular,  you don't use it

5.      Early adopter risk. This technology is still in its infancy. Support keeps changing, standards keep changing, and libraries can be completely rewritten at any time

6.      The native Java SDK integration in the JavaScript is a pain too

What Are The Advantages and Disadvantages of Ionic Frameworks?

Is the Ionic Framework Responsive?

Yes!, Ionic framework is quick, smooth and responsive.

The Ionic Framework offers developers a responsive grid similar to that of something like Bootstrap (CSS Frameworks).

Is Ionic Framework still good?

Yes!, it's still a good solution for rapid, cross-platform development.

It is also good in a relative term. Ionic is mature. It's cross platform. It's open and is built upon very well understood web standards. Mobile browsers since iPhone 5s and up are capable of running Ionic apps to optimal standards.

Is Ionic Native?

Yes!, Ionic Native is a Typescript wrapper for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic mobile app easy.

Why I’m switched to the Ionic Framework?

The main Reasons are -

1.      Ionic Framework is completely free and Open Source

2.      The One code, run most of on all mobile devices

3.      Ionic Framework is built on Angular

4.      Ionic Framework has a Beautiful Default UI That Is Easy to Customize

5.      Ionic Framework integrates easily with Native Functionality

6.      The core development team is Awesome :)

How to Setup and Install Ionic Framework?

Ionic Framework is an npm module and requires Node.js.

Let explore the link for detail => Setup and Install

The List of Useful Ionic Framework Commands?

The commands and its description

1.          start- This command is used to create a new project

2.          generate-  This command is used to generate pipes, components, pages, directives, providers and tabs

3.          serve- This command is used to start a local dev server for app dev/testing

4.          build - This command is used to Build web assets and prepare your app for any platform targets

5.          docs - This command is used to Open the Ionic documentation website

6.          info - This command is used to Print system/environment info

7.          link- This command is used to Connect your local app to Ionic

8.          login- This command is used to Login with your Ionic ID

9.          signup - This command is used to Create an Ionic account

10.     telemetry-  This command is used to Opt in and out of telemetry

11.     upload- This command is used to Upload a new snapshot of your app

12.     config get- This command is used to Print config values

13.     config set- This command is used to Set config values

14.     cordova build- This command is used to Build an Ionic project for a given platform

15.     cordova compile- This command is used to compile native platform code

16.     cordova emulate- This command is used to Emulate an Ionic project on a simulator or emulator

17.     cordova platform- This command is used to Manage Cordova platform targets

18.     cordova plugin - This command is used to Manage Cordova plug-in

19.     cordova prepare - This command is used to Copies assets to Cordova platforms, preparing them for native builds

20.     cordova resources - This command is used to Automatically create icon and splash screen resources

21.     package build- This command is used to Start a package build

22.     package download- This command is used to Download your packaged app

23.     package list - This command is used to List your cloud builds

24.     package info - This command is used to Get info about a build

25.     cordova run - This command is used to Run an Ionic project on a connected device

What Are the Others Ionic Commands also Available for Angular?

Others Ionic Commands also Available for Angular Projects -

1.          Pipes,

2.          Components,

3.          Directives,

4.          Providers and

5.          Tabs

6.          And So On

Syntax –

1.          ionic generate [<pipes>] [<pipes-name>]

2.          ionic generate [<components>] [<components-name>]

3.          ionic generate [<directives>] [<directives-name>]

4.          ionic generate [<providers>] [<providers-name>]

5.          ionic generate [<tabs>] [<tabs-name>]

The List of Examples –

1.          ionic generate component

2.          ionic generate directive

3.          ionic generate page

4.          ionic generate pipe

5.          ionic generate provider

6.          ionic generate tabs

7.          ionic generate component demoApp

8.          ionic generate page Login

9.          ionic generate page register --no-module

10.     ionic generate page users --constants

11.     ionic generate pipe MyCustomPipe

List Some Popular apps built with Ionic Framework?

Here goes a list of some popular applications built with the help of ionic framework –

1.          Pacifica

2.          MarketWatch

3.          Nationwide

4.          Untappd

5.          JustWatch

6.          ChefStepsl

7.          Cryptochange

8.          TD Trading

9.          Sworkit

How many Types of Storage Available in Ionic Framework?

Eight (8) Types of Storage Available in Ionic Framework -

1.          HTML5 local Storage

2.          indexedDB

3.          Webservice

4.          API storage

5.          WebSQL

6.          Cookie and session storage

7.          PouchDB

8.          Cordova storage

How To Use Observables in an Ionic Framework?

Observables are something that are not specific to Ionic or Angular and are provided by the RxJS library.  Observables are almost similar to the promises but you can do lots of more.

How to parse JSON in Ionic Framework?

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string.

The Example is -

var users = JSON.parse(userResponseData);

How To Disable / Enable Content Scrolling in IONIC Framework?

We can disable/enable scrollbar pragmatically.

Example 1 -  Try a setting <content scroll="false"> that will disable scrolling.

Example 2 , You can alos used this as a quick fix –

This every time an event is called, in our case, on every drag event.

Disable Scrolling -

$ionicScrollDelegate.getScrollView().__enableScrollY = false

Enable Scrolling -

$ionicScrollDelegate.getScrollView().__enableScrollY = true

Example 3,

$timeout(function(){

   $ionicScrollDelegate.$getByHandle('formularContent').freezeScroll(true);

})

Example 4,

Add the .scss file –

.no-scroll .scroll-content{

    overflow: hidden;

}

And

Then add the no-scroll class to your ion-content like this –

<ion-content class="no-scroll">

..

</ion-content>

I hope you enjoyed with this post. Thank you very much for your time.