Ionic Interview Questions and Answers [BEST & NEW]
Ionic-Interview-Questions-and-Answers-ACTE

Ionic Interview Questions and Answers [BEST & NEW]

Last updated on 18th Nov 2021, Blog, Interview Questions

About author

Saravanan (Sr Technical Manager )

He is a Proficient Technical Expert for Respective Industry Domain & Serving 8+ Years. Also, Dedicated to Imparts the Informative Knowledge's to Freshers. He Share's this Blogs for us.

(5.0) | 16547 Ratings 2170

    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.

1.What is the Ionic Framework?

Ans:

    Ionic framework is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript. It allows developers to build once and run everywhere.

2.Who created the Ionic Framework?

Ans:

    It was created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The first beta version of the Ionic framework was released in March 2014.

3.How do you install an Ionic Framework?

Ans:

    Pre-requisite for Ionic.The following things are required to install Ionic:

    • Node.js and NPM.
    • Code Editor.
    • Ionic CLI.

4.What is the Ionic CLI?

Ans:

    The official Ionic CLI or Command-Line-Interface is a primary tool used for developing the Ionic application. It gives a bunch of miscellaneous tools under a single interface. It provides you many crucial commands for Ionic development, such as start, build, serve, and run. It also contains commands like emulate and info, which can be helpful in certain situations. It is also responsible for cloud builds and deployment, and administer your account on Ionic pro.

5.What are the advantages of an Ionic Framework?

Ans:

    The advantages of Ionic application development framework are as following.

6.How to rename an Ionic app?

Ans:

    To rename the Ionic app, open the config.xml file from your project’s root directory and update the value inside the name tag.

7.What are the features of an Ionic framework?

Ans:

    The most important features of the Ionic framework are as follows:

8.How is Ionic Framework version 4 different from the previous versions of the Ionic Framework?

Ans:

    Ionic framework team has released the Ionic 4 version after the release of Ionic 3. The new version of Ionic brings significant changes in the project structure, performance, and compatibility with multiple frameworks (Such as Angular, React.js, and Vue.js), new documentation, and many other improvements. If you want to know these changes.

9.What is Lazy Loading?

Ans:

    Lazy loading is a general process where we load that thing whenever we need them. The main idea behind this concept is that we do not need to load every page in the application when the application is launched. In the previous versions of Ionic framework, it is recommended to use @IonicPage decorator to lazy load your pages, but now in the latest version of Ionic (Ionic 4), we lazy load our Angular components with Angular routing.

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

Ans:

    Some of the popular apps built with the Ionic Framework are listed below:-

  • Sworkit : This app is built for workout and fitness plans.
  • Cryptochange : It is an app, which is built for cryptocurrency tracker.
  • justWatch : It is an app for streaming Search Engine Portfolio.
  • MarketWatch : It is an app for the stock market and business news.
  • Pacifica : It is an app for Cognitive Behavioural Therapy.
  • Untappd : This is an app for Social Discovery and check-in Network National Museum of African American History and Culture.

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

Ans:

    Ionic 4 depends on Angular that uses Angular’s router module called RouterModule for navigation. It provides more consistent routing experience into the whole app. The previous versions of Ionic use NavController service for navigation, which is still there, but it will be deprecated soon. Thus, it will not be recommended in the new Ionic apps built with Ionic 4.

12.What is Web View?

Ans:

    We know that Ionic apps are built using web technologies such as HTML, CSS, and JavaScript. These web technologies are rendered using Web Views, which are full screen and full-powered web browser.The latest web view provides many built-in HTML5 APIs for hardware functionality, which are a camera, Bluetooth, GPS, sensors, and speakers. Sometimes it also needs to access platform-specific APIs. In the Ionic framework, the hardware APIs can be accessed through a bridge layer, typically by using native plugins that expose JavaScript APIs. The following image provides you a detailed explanation of web view architecture.

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

Ans:

    CORS stands for cross-origin resource sharing. It is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, have permission to access selected resources from a different origin.

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

Ans:

  • The ionic framework provides a storage module that resides in @ionic/storage package. The storage module allows us to store key-value pairs and JSON objects in secure, reliable storage. It also has its own set of limits.
  • Storage has a variety of storage engines, which one is best depends on the platform you are using. When running in a native app context, the storage uses SQLite. When running on the Web or as a Progressive Web App, Storage will use IndexedDB, WebSQL, and localstorage.
  • The SQLite is the most stable and used a file-based database, which avoids the pitfalls of the other storage engines like IndexedDB, WebSQL, and localstorage.

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

Ans:

    The size of the Ionic app can be reduced in the following ways:

  • First, compress all the screenshots and icons and deletes all unwanted icons. If you use portrait mode, keep only portrait screenshots, and if you are using landscape mode, keep all the screenshots landscape.
  • Second, minify all JS and CSS files and update the index.html file accordingly.
  • Third, remove unwanted external modules and Cordova plugins that are not being used. You can also remove unnecessary code from the app, which adds a lot of extra bytes to the app’s size.
  • Last, you can also run the following command to reduce the app size: ionic build android -prod.

16.How would you compare Ionic and Apache Cordova?

Ans:

    Ionic and Apache Cordova are built on top of Cordova, so they are not considered competitors. They are two popular technologies widely adopted in the market for mobile app development. The combination of these technologies forms a development platform which is known as hybrid app development. Both frameworks have a large community of passionate developers and are used in large enterprises.

17.How many types of storage available in the Ionic framework?

Ans:

    There are many types of storage available in the Ionic Framework; some of them are given below:-

    • Local storage
    • SQLite
    • Cookie and session storage
    • indexedDB
    • WebSQL
    • PouchDB
    • Webservice/api storage
    • Cordova storage.

18.What is the current stable version of the Ionic Framework?

Ans:

    The current version of the Ionic framework is 5.4.6. It was released on 12 November 2019. It uses Angular 6 or above for development. It mainly focusses on the user interface of your application.

19. What are the disadvantages of an Ionic Framework?

Ans:

    The disadvantages of Ionic application development framework are as following:

20.How to update Cordova plugins?

Ans:

    We can update the Cordova plugins by using the following command. npm install -g cordova-check-plugins cordova-check-plugins –update=auto

21.What is ion-app?

Ans:

    The ion-app is a container element for the whole Ionic app. The Ionic project should have only one ion-app element and can have many Ionic components such as header, footers, menus, content, etc. All these components wrapped into the ion-app component when they are presented.

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

Ans:

    The Ionic framework has a set of nine pre-defined colors, which is used to change the color of many components. Each color is a collection of multiple properties, including shade and a tint. We can apply color to an Ionic component by using the color attribute. If you have not set any color to the required element, it sets the primary color by default. The default set of colors provided by the Ionic framework are primary, secondary, tertiary, danger, warning, success, dark, medium, and light.

23.What are Native Apps?

Ans:

    Native apps are apps for certain devices like smartphones, tablets, etc. It can be installed directly on to the device through an application store (Such as Google Play or Apple’s App Store). They are always live on the device and can be accessed through icons on the device home screen. These apps can use the device notification system and can also work offline. Some of the famous native apps are Camera, Collage-Maker, Google Maps, Facebook, etc.

24.What is Mobile Web Apps?

Ans:

    Mobile web apps are internet-enabled apps, which have specific functionality for mobile devices. The mobile web apps accessed through the mobile device’s web browsers. They do not need to be downloaded and installed on the device.

25.What are Hybrid Apps?

Ans:

    A hybrid app is an app, which combines the elements of both native apps and web apps. It can be installed on a device, just like any other apps. They are similar to native apps and are written with web technologies, such as HTML, CSS, and JavaScript. They are popular because they allow developers to write code for the mobile app once and can deploy on multiple platforms.

26.How can you identify a platform (iOS or Android) at runtime in the Ionic application?

Ans:

    Ionic provides a platform service that can be used to get information about the current device. The platform method provides all of the platforms associated with the device. It also tells whether the app is being viewed from a tablet, mobile device, or a browser and about the exact platform like Android, iOS, etc. When the application is loaded on the device, then the Ionic adds CSS classes to the tag. For example, on iOS devices, Ionic add platform-ios class to tag.

27.What is the difference between “ionic build” and “ionic prepare”?

Ans:

Ionic Prepare
Ionic Build
The ionic prepare platform copies all files from the www folder into the target platform’s www folder. The ionic build platform performs the task of ionic prepare as well as it builds the app’s source code, which facilitates to run over the Simulator of an emulator or a device.

28. What is ion-grid?

Ans:

    The Ionic grid system is a powerful mobile-based flexbox system for building a custom layout. The Ionic grid is mainly composed of three units, which are a grid, rows, and columns. The Ionic grid is made up of 12 column layout with different breakpoints based on the screen size.

29.Explain the working of an ion-grid component.

Ans:

    Some of the important points that we need to know while working with the Ionic grid are:-

  • Grids act as a container for rows and columns. It takes the full width of their container, but adding the fixed attribute will specify the width per screen size.
  • Rows are horizontal groups of columns, and columns are a place where we put our contents, and only columns should be immediate children of rows.
  • The size 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.
  • If columns are without size value, it will automatically take equal widths.
  • Columns have padding attributes between individual columns; however, the padding can be removed from the grid and columns by using no-padding on the grid.
  • The grid contains five grid tiers, one for each responsive breakpoint. All breakpoints are extra-small, small, medium, large, and extra-large.

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

Ans:

    Some of the important Ionic components are:-

    1.Ion-Alert

  • An alert is a dialog that notifies the user with important information to make a decision or provide the ability to choose a specific action or list of actions. It appears on top of the app content. It can be dismissed manually by the user before resuming interaction with the app.
  • 2.Ion-Buttons

  • Buttons are an essential way to interact with and navigate through an app. It is used to clearly communicate what action will occur when the user clicks on them. The buttons can contain two things, which are text, icons, or both. It can also be enhanced with a variety of attributes such as color, shape, size to look a specific way.
  • 3.Ion-Content

  • The Ionic content element serves as a container, which wraps all other elements that we want to create in the app. The content component allows an easy to use content area that contains some useful methods to control the scrollable area. In the Ionic app, there should be only one content component in a single view. We can also customize it by individual styling using CSS and the available CSS custom properties.

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

Ans:

    Config.xml is a global configuration file that controls the build settings of the Ionic apps. It controls many aspects of a Cordova application behavior. When you scaffold the Ionic application, a basic config.xml file is generated for you in the top-level directory. This file follows the W3C Package Web Apps (widget) specification. It allows developers to specify metadata about their applications easily. It contains various information about the project, such as package name, version, author’s information, plugins, platform, etc.

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

Ans:

    The ion-infinite-scroll is a very useful component when we have to show a large set of data at once in the Ionic application. This component allows to load data into the app when the user scrolls a specified distance from the top or bottom of the page.Every mobile application needs a way to show the huge set of data in a lesser number of clicks. In that case, the infinite scroll plays an essential role for them. The infinite scroll component works like we load ten items on a page. Now, when the user scrolls those items and reaches close to the bottom, it makes a new data request. This request gets the next set of records items that will be added to the existing items. This process is repeating until the new data is not found in chunks as user scrolls.

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

Ans:

    Refreshing means updating of the currently displayed page so that the user can see the latest content. Ionic provides the component to add pull-to-refresh functionality on a content component. An Ionic allows the users to pull the page down from the top on a list of data using touch to retrieve more data. The updated data should be modified during the refresher’s output events. Once, the refreshing of page ends, call the complete() function on the refresher.

34.What is a Progressive Web App?

Ans:

    A progressive web app is a normal web app, which looks and feels like native mobile apps. It uses modern web capabilities to deliver an app-like experience to the user. These apps can easily deploy to servers, accessible through URLs, and indexed by search engines. The PWA app optimizes to be:-

  • Reliable: Load fast and provide offline functionality.
  • Fast: It should be fast and respond quickly to user actions.
  • Re-engageable: It makes re-engagement with the user through push notification, which feels like a native app on the mobile device.
Progressive Web App

35.Which IDE is good for Ionic mobile application development?

Ans:

    We know that Ionic built on ES6 and TypeScript, so your editors or IDE must support these new languages. The most popular editors and IDEs, which give you the most effective support for the Ionic application development are:-

  • Visual Studio.
  • WebStorm.
  • Atom

36.What is Ionic Market?

Ans:

    Ionic team announces Ionic Market for Ionic developers who want to use pre-build starters, themes, plugins, etc. The Ionic Market categories into three types: Starters, Plugins, and Themes. The Ionic marketplace makes it easy to submit and buy starters, plugins, and themes, as well as download them for your projects. It is a good place where you can sell and purchase ionic stuff.

37.What are different page life-cycle events in Ionic?

Ans:

    Ionic uses the life-cycle events provided by the Angular. These life-cycle events are:-

  • ngOnInit: It is fired once during component initialization. It can be used to initialize local members and make calls into services, which need to be done only once.
  • ngOnDestroy: It is fired just before Angular destroys the view. It can be useful for clean-up like unsubscribing from observables.
  • ionViewWillEnter: It is fired when the component routing-to is about to animate into view.

38.Name all the page life-cycle hooks in Ionic 4.

Ans:

    The Ionic hooks have three different life-cycle, which are given below:-

  • ionNavDidChange: This event is fired when the nav has changed components.
  • ionNavWillChange: This event is fired when the nav will components.
  • ionNavWillLoad: This event is fired when nav will load a component.

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

Ans:

    To debug apps when testing on real devices or emulators, we can use Chrome Remote debugging and other developer tools provided by Google Chrome to spot the issues within the app. Remote debugging tools allow us to debug live content on the Android device from the Mac, Linux, or Windows. Safari browser also allows us similar features for debugging an iOS application running on Simulator or iPhone.

40.Can we use Firebase with Ionic?

Ans:

    Yes, we can use Firebase with Ionic. It is one of the most powerful and popular databases as a service solution available today. Firebase SDK is also available as a node module. It can be installed within your project, import it, and can use it.

43.How would you get the list of all the available start-up templates for an Ionic app?

Ans:

    We can display the list of all available templates that can be used while creating a new Ionic application by using the following command:-

  • ionic start –list

42.How would you add a custom splash screen to an Ionic app?

Ans:

    A splash screen is similar to a start screen or start-up screen. It is a graphical control element, which contains the image, logo, and current version of the software. The splash screen is just a display screen that allows users to look something while the hardware is loading to present software to the user. It usually appears when a game or program is launching.

43.Explain async and await.

Ans:

    The async and await both are new keyword introduced in the ES2017 to write async functions. They are used to execute asynchronous code blocks. Basically, it allows you to write promises in a more readable way. Let us understand it with the following example:-

    • promiseFunction(){
    • return new Promise((resolve,reject)=>{
    • setTimeout(()=>{
    • resolve(“Promises Resolved”);
    • },3000);
    • })
    • }

    The above function will return a promise, which will be resolved in 3000 milliseconds. We can call the above promise function as below.

    • promiseFunCall() {
    • this.promiseFunction().then(
    • successData => {
    • console.log(output: successData);
    • },
    • rejectData => {
    • console.log(output: rejectData);
    • }
    • );
    • }

    Now, we are going to see how promises will be converted into the async-await function. The promiseFunction() will remain the same, and the async-await function handled how the promises will be called. So, the above function promiseFunCall() can be re-written as:

    • async promiseFunCall() {
    • try {
    • let successData= await this.promiseFun();
    • console.log(output: successData);
    • } catch (error) {
    • console.log(error);
    • }
    • }

44.Explain Events in Ionic?

Ans:

    Events in Ionic is a publish-subscribe style event system, which can be used to pass messages across different components and pages. In other words, it is a system for sending and responding to application-level events across your app. We can understand it with the following example where one page publishes an event, and the second page subscribes to that event.

45.When would you use an AlertController in Ionic?

Ans:

    An alert is a dialog that notifies the user with important information to make a decision or provide the ability to choose a specific action or list of actions. It can be dismissed manually by the user before resuming interaction with the app. It can be thought of as a floating modal which should be used for a quick response such as password verification, small app notifications, and many more.The alert controller is responsible for creating an alert in the Ionic application. It uses create() method to create an alert and can be customized by passing alert option in the create() method.

46.What is the capacitor in Ionic?

Ans:

    The capacitor is a cross-platform app, which makes it easy to build web apps that run natively on iOS, Android, Electron, and the Web with one single code base. These apps can be called Native Progressive Web Apps and represent the next evolution beyond Hybrid apps.It sees as a replacement of Apache Cordova and Adobe Phonegap, with inspiration from other popular cross-platform tools like React native, but focuses entirely on enabling modern web apps to run on all major web platforms. The capacitor has a number of backward-compatible support for many existing Cordova plugins.

47.How you get a user’s current location in an ionic framework? How can you access mobile phone native functionality in Ionic applications, for example, the camera?

Ans:

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

48.How to use observables in the Ionic framework?

Ans:

    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.

49.What is Ionic header bar and where it is located?

Ans:

    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.

50.What is Ionic footer bar and where it is located?

Ans:

    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.

51.How to integrate essential JS Electron apps with Ionic?

Ans:

    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.

52.What is a Hybrid Application?

Ans:

    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.

Hybrid Application

53.What is $ionic backdrop?

Ans:

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

54.What are the services and features of the Ionic framework?

Ans:

    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.

55.What is IONIC?

Ans:

    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.

56.How can you detect a platform (Android or iOS) at runtime in the Ionic application?

Ans:

    Ionic provides platform classes: when the application is loaded, Ionic adds CSS classes to the tag. For example, on iOS devices, Ionic adds platform-ios class to tag. Ionic also adds OS version classes such as platform-ios8 (for iOS 8) and platform-android4_4 (for Android 4.4).

57.What are the new features in Ionic 4?

Ans:

    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.

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

58.What is the difference between package.json and package-lock.json in Ionic Project.

Ans:

Package.json
Package-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.

59.If more than one component is trying to make an HTTP call to same URL, then how can you restrict making 2 network calls?

Ans:

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

60.What is the difference between Observable and Promises?

Ans:

Observable
Promise
Computation does not start until subscription so you can run then only when you need the result. Execute immediately after creation.
Provide multiple values over time. Provide only one.
Subscribe method is used for error handling which makes centralized and predictable error handling. Pushes errors to the child promises.
Provides chaining and subscription to handle complex applications. Uses only .then() clause.

61.What are the Example of Promise and Observable?

Ans:

    Promise:-

    Ans:

    var promise = new promise((resolve) => {

    setTimeout(() => {

    resolve(42)

    }, 500)

    console.log(“Promise started”)

    })

    promise.then(data => console.log(“Output”, data))

    Observable:

    var observable = Rx.Observable.create((observer) => {

    setTimeout(() => {

    observer.onNext(42)

    },200)

    console.log(“Observer started”)

    })

    observable.forEach(x => console.log(“Output is x))

62.Describe briefly how to create a service with get and post requests.

Ans:

    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.

63.What are slides?

Ans:

    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.

64.Explain with example of slides.

Ans:

    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();
    • }

65.How can you create a button with rounded corners and outline but no background color?

Ans:

    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.

66.How can we show tabular data in responsive manner in ionic?

Ans:

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

67.How to integrate Google login in an Ionic app?

Ans:

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

68.Write an ionic cli command to create a module file without its folder

Ans:

    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.

69.How can you make your ionic app work in offline mode ?

Ans:

    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.

70.How can you use a custom component in multiple pages ?

Ans:

    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.

71.How can you connect your Ionic app with FireStore for CRUD operations ?

Ans:

    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.

72.Why Build Native Apps, When Hybrid Apps Development Frameworks Are There?

Ans:

    Some of the following could not be achieved effectively using web frameworks:-

  • Access to platform-specific UI components, like maps, date pickers, switches, and navigation stacks.
  • Native mobile gesture recognizers.
  • Complex and sophisticated threading models that help parallelize work onto multiple threads.

73.What Is The Difference Between Phonegap, Cordova, And Ionic?

Ans:

    PhoneGap is a library that exposes native mobile phone functionalities as JavaScript API. When Adobe purchased PhoneGap, its open source core was donated to the Apache Software Foundation under the name Cordova. In the beginning, there was almost no difference between Cordova and PhoneGap. Although, over the years of development, Adobe started adding a proprietary set of the services to PhoneGap. Today, it is safe to say PhoneGap is Cordova plus extra Adobe services.Ionic uses Cordova, not PhoneGap for its core tools. Beside native mobile phone functionalities, Ionic gives structure and code scalability to JavaScript applications by using AngularJS. It also provides a set of Angular directives and components to speed up application development.

Phonegap, Cordova, And Ionic

74.What Are Some Of The Disadvantages Of Building Native Apps?

Ans:

    Even a small change needs a recompile that slows up the developers. This become a nightmare when the codebase is very large.Testing new functionality is cumbersome.Calls between native and interpreted environment could end up blocking UI thread.

75.How Do You Persist Data Between Application Launches Using Ionic Framework?

Ans:

    As Ionic behind the scene builds HTML5 based applications, you can use localStorage and sessionStorage API to persist data on the mobile phone. However, since localStorage can only store strings, objects need to be stringified before saving. Also, it is important to mention localStorage has size limit around 5MB.

76.How Do You Pass Data From One View To Another In Ionic Applications?

Ans:

    Ionic uses AngularJS and UI-router. It means you can use Angular services or UI-router’s state resolve to pass data from one view to another. Since Angular services are singletons, data stored in services can be accessed across other Angular controllers.

77.How Can You Render A 5000 Item List In Ionic, Without Affecting Scroll Performance?

Ans:

    Ionic provides a collection-repeat directive that renders only visible items in the DOM. So even if the list is huge, like 5000 in our example, only items visible in a viewport are rendered. Thus, scroll performance is not affected.

78.What Is The Advantage Of Caching The Views In Ionic Apps?

Ans:

    Ionic by default caches up to ten views, which improves performance and also maintains different states in the views at the same time. For example, the cache can maintain scroll position in the views or active state of buttons.

79.How Can You Detect A Platform (android Or Ios) At Runtime In Ionic Application?

Ans:

    Ionic provides platform classes: when the application is loaded, Ionic adds CSS classes to the tag. For example, on iOS devices, Ionic adds platform-ios class to tag. Ionic also adds OS version classes such as platform-ios8 (for iOS 8) and platform-android4_4 (for Android 4.4).

80.How Can You Test Ionic Applications?

Ans:

    Ionic applications are built using AngularJS. Angular has a rich set of test libraries and frameworks such as Jasmine and Karma test runner. These frameworks can be used to write unit tests for Ionic applications. Also, ionic-CLI provides live reload feature so the application can be tested in the browser. For example, the ionic serve command can be used to load the application in any browser. Thus, we can use Chrome Developer Tools or Mozilla Firefox with Firebug to debug and inspect Ionic applications.

81.Performance Of Ionic Application Is Bad On Older Android Devices. Why Is This, And What Can Be Done To Improve It?

Ans:

    Ionic framework uses the default web browser available for the device to run its hybrid application. Older versions of Android devices (4.0-4.3) use Android’s default browser, which has significantly less performance and standards compliance than the modern Chrome browser.

82.How To Get The Installed Version Of The Ionic Framework?

Ans:

    You can get installed version of Ionic framework by running ionic.version in console of your web browser.

83.What Is The Difference Between Ionic Polymerization And Free-radical?

Ans:

    A chain of polymerization where active centers are ions is known as ionic polymerization. The ions may be anions or cations.In free-radical polymerization, the building blocks are the free radicals which form polymer chains.

84.How To Use Service/providers In Ionic?

Ans:

    Services play an important role in Ionic framework as they provide information to our application and perform various tasks for us. Connectivity Monitor, Simple Alert, data, Google Maps, etc. are some of the services which are built in ionic framework. There are few concepts which are to be kept in mind while creating a service. Importing a service, adding a provider to it, and injecting it are the most important thing. The services should be imported in the classes where they are to be used. When it is injected inside a constructor, a new member variable is created which can be accessed from anywhere within the class. A provider can be added in a service by two ways. Either it can be added to an individual component, or it can be added globally to the application when bootstrapping the root component.

85.What Are The New Features Included In Ionic2?

Ans:

    There is a reason why Ionic2 framework is better than the Ionic1 framework. Here are some features which were included in the ionic2 framework when it was being developed.

  • Ionic2 framework consists of classes unlike ionic1 which has controllers.
  • In ionic2, every component has its own folder and its own class file.
  • In ionic2, you can automatically generate pages, providers, tabs, pipes, components, and directives.
  • In this, more native approach is used for navigation.
  • Ionic2 is just plain old JavaScript.

86.What Is The Current Stable Version Of Ionic Framework?

Ans:

    Ionic currently requires Angular JS in order to work as its full potential. The current stable version of the ionic framework is ionic 3.0. It was released on 24th February, 2017. It helps you build native-feeling mobile applications using web technologies. It mainly focuses on the look and feel, and the user interface of your application.

87.How To Use Observables In Ionic Framework?

Ans:

    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 can do a lot more. It can deal with multiple values at a time rather than just resolving one value. You can even subscribe to an observable to manipulate the data which is associated with it. Observables are considered to be “lazy”, i.e. they won’t get executed until and unless they are subscribed to. Various operations can be applied to the observables for modifying it and returning a new one. You can even create your own observable. The observable patterns are combined into one with the help of subject which is preferred for simple implementations.

88.Why Should Mobile Developers Consider Phonegap?

Ans:

    Mobile developers use PhoneGap because it allows them to have a common codebase for all their application code. It doesn’t force developers to reinvent the wheel every time they move from platform to platform.

89.What Is The Difference Between Phonegap And Cordova?

Ans:

    PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will remain free and open source under the Apache License, Version 2.0.PhoneGap is an open source distribution of Cordova. Think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.

90.Can You Use Php/asp/jsf/java/.net With Phonegap?

Ans:

    A PhoneGap application may only use HTML, CSS, and JavaScript. However, you can make use of network protocols (XmlHTTPRequest, Web Sockets, etc) to easily communicate with backend services written in any language. This allows your PhoneGap app to remotely access existing business processes while the device is connected to the Internet.

91.How Much Does Phonegap Cost?

Ans:

    PhoneGap is an open source implementation of open standards and FREE. That means developers and companies can use PhoneGap for mobile applications that are free, commercial, open source, or any combination of these.

92.Mention The Difference Between Air And Phonegap?

Ans:

    The most fundamental differences between AIR and PhoneGap is that you build AIR applications using tools rooted in the Flash Platform, and you can develop PhoneGap application using HTML, CSS and JavaScript. AIR applications use the AIR runtime, it enables you to have a single code base, with the exact similar expected behavior through all supported platforms. PhoneGap applications execute inside of the native web browser component for each supported platform. For separate platform, PhoneGap may behave differently.

93.Explain How Do You Architect Phonegap Applications?

Ans:

    PhoneGap applications can be architect, in the same way, like other mobile web services. The main difference is that the initial HTML assets are available locally, instead of a remote server. The PhoneGap application loads the initial HTML which can request resources from a server or from the local environment. PhoneGap also supports the single page web experienced model.

94.What Is The Default Scope Of Bean In Spring Framework?

Ans:

    The default scope of bean is Singleton for Spring framework.

95.Is Singleton Beans Are Thread Safe In Spring Framework?

Ans:

    No, singleton beans are not thread-safe in Spring framework.

96.What Is Bean Factory?

Ans:

    Bean Factory is core of the spring framework and, it is a Lightweight container which loads bean definitions and manages your beans. Beans are configured using XML file and manage singleton defined bean. It is also responsible for life cycle methods and injects dependencies. It also removes adhoc singletons and factories.

97.Define Bean Wiring?

Ans:

    Bean wiring is the creation of associations between application components that are between the beans in a particular spring container.

98.What Is Called Spring Mvc?

Ans:

    A Spring MVC is a single shared controller instance and it is used to handle request type controllers, interceptors which run in the IoC container. It also allows multiple Dispatcher Servlets which can share application context interface but not class based interface.

99.Explain The Rowcallbackhandler In Spring?

Ans:

    The RowCallbackHandler is called for each row in ResultSet and is used to read values from the ResultSet.

100.Define Application Context Module?

Ans:

    This is a very important module and supplies various necessary services like EJB integration, remoting, JNDI access and scheduling. It transforms spring into a framework. It also broadens the idea of BeanFactory by application of lifecycle events, providing support for internationalization messages and validation.

Application Context Module

Are you looking training with Right Jobs?

Contact Us

Popular Courses

Get Training Quote for Free