Skip to main content

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



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.
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

Encryption and Decryption Data/Password in Angular

You can use crypto.js to encrypt data. We have used 'crypto-js'.   Follow the below steps, Steps 1 –  Install CryptoJS using below NPM commands in your project directory npm install crypto-js --save npm install @types/crypto-js –save After installing both above commands it looks like  – NPM Command  1 ->   npm install crypto-js --save NPM Command  2 ->   npm install @types/crypto-js --save Steps 2  - Add the script path in “ angular.json ” file. "scripts" : [                "../node_modules/crypto-js/crypto-js.js"               ] Steps 3 –  Create a service class “ EncrDecrService ” for  encrypts and decrypts get/set methods . Import “ CryptoJS ” in the service for using  encrypt and decrypt get/set methods . import  {  Injectable  }  from   '@angular/core' ; import   *   as   CryptoJS   from   'crypto-js' ; @ Injectable ({    providedIn:   'root' }) export   class   EncrDecrS