Ionic interview questions LEARNOVITA

Ionic Interview Questions and Answers [BEST & NEW]

Last updated on 26th Sep 2022, Blog, Interview Question

About author

Sanjay (Sr Big Data DevOps Engineer )

Highly Expertise in Respective Industry Domain with 7+ Years of Experience Also, He is a Technical Blog Writer for Past 4 Years to Renders A Kind Of Informative Knowledge for JOB Seeker

(5.0) | 13265 Ratings 1619

1.What is the Ionic Framework?


Ionic framework is associate degree ASCII text file UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive internet apps victimization internet technologies like HTML, CSS, and JavaScript. It permits developers to create once and run everyplace.

2.Who created the Ionic Framework?


It was created by gamma hydroxybutyrate kill, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The primary beta version of the Ionic framework was free in March 2014.

3.How does one install an associate degree Ionic Framework?


Prerequisite for Ionic.The following things are unit needed to put in Ionic:

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

4.What is the Ionic CLI?


The official Ionic user interface or Command-Line-Interface could be a primary tool used for developing the Ionic application. It offers a bunch of miscellaneous tools underneath one interface. It provides you a great many crucial commands for Ionic development, like begin, build, serve, and run.

5.What area unit the benefits of associate degree Ionic Framework?


The advantages of Ionic application development framework are as follows.

6.How to rename associate degree Ionic app?


Open the config.xml file in your project’s root directory and change the value in the name tag to rename the Ionic app.

7.What area unit the options of associate degree Ionic framework?


The most vital options of the Ionic framework area unit as follows:

  • You can transfer to a CSU, some UCs, HBCUs, and private colleges with an associate’s degree for transfer (ADT), an associate’s in arts (A.A.), an associate’s in science (A.S.), or both.

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


The Ionic framework team has free the Ionic four version when the discharge of Ionic three. The recreation of Ionic brings vital changes within the project structure, performance, and compatibility with multiple frameworks (Such as Angular, React.js, and Vue.js), new documentation, and plenty of alternative enhancements.

9.What is Lazy Loading?


Lazy loading could be a general method wherever we have a tendency to load that factor whenever we want them. The best plan behind this idea is that we have a tendency to not load each page within the application once the application is launched. Within the previous versions of Ionic framework, it’s suggested to use @IonicPage decorator to lazy load your pages, however currently within the latest version of Ionic (Ionic 4), we have a tendency to lazy load our Angular parts with Angular routing.

10.Name some standard apps engineered with the Ionic Framework?


Some of the popular apps engineered with the Ionic Framework area unit listed below:

Sworkit : This app is made for sweat and fitness plans.

Cryptochange : it’s associate degree app, that is made for cryptocurrency huntsman.

JustWatch : it’s an associate degree app for streaming programme Portfolio.

MarketWatch : it’s an associate degree app for the exchange and news.

Pacifica : it’s associate degree app for psychological feature behavioral medical aid.

Untappd : this can be an associate degree app for Social Discovery and arrival Network National repository of African yankee History and Culture.

11.What is the suggested means of implementing navigation inside associate degree Ionic four app?


Ionic four depends on Angular that uses Angular’s router module known as RouterModule for navigation. It provides additional consistent routing expertise into the full app. The previous versions of Ionic use NavController service for navigation, that remains there, however it’ll be deprecated shortly. Thus, it’ll not be suggested within the new Ionic apps engineered with Ionic four.

12.What is Internet View?


We know that Ionic apps are unit engineered victimization internet technologies like HTML, CSS, and JavaScript. These internet technologies are unit rendered victimization internet Views, that area unit full screen and full-powered application.The latest internet read provides several inbuilt HTML5 Apis for hardware practicality, that area unit a camera, Bluetooth, GPS, sensors, and speakers. typically it must access platform-specific Apis. Within the Ionic framework, the hardware Apis may be accessed through a bridge layer, usually by victimizing native plugins that expose JavaScript Apis. The subsequent image provides you a close clarification of internet read design.

13.What is CORS? however would you subsume it?


CORS stands for cross-origin resource sharing. It’s a mechanism that uses further protocol headers to inform browsers to relinquish an internet application running at one origin, and have permission to access elect resources from a unique origin.

14.How would you save information in an associate degree Ionic app so it may be accessed later or on future launch?


  • The storage module permits the USA to store key-value pairs and JSON objects in secure, reliable storage. It conjointly has its own set of limits.
  • Storage incorporates a kind of storage engine, that one is best depends on the platform you’re victimizing. Once running in a very native app context, the storage uses SQLite. Once running on the online or as a Progressive internet App, Storage can use IndexedDB, WebSQL, and localstorage.
  • SQLite is the most stable and used file-based info, that avoids the pitfalls of the opposite storage engines like IndexedDB, WebSQL, and localstorage.

15.The size of your Ionic application generated APK is large. What are you able to do to scale back the size?


The size of the Ionic app may be reduced within the following ways:

  • If you employ portrait mode, keep solely portrait screenshots, and if you’re victimization landscape mode, keep all the screenshots landscape.
  • Second, modify all JS and CSS files and update the index.html file consequently.
  • Third, take away unwanted external modules and Cordova plugins that don’t seem to be getting used. you’ll conjointly take away spare code from the app, that adds plenty of additional bytes to the app’s size.
  • Last, you’ll conjointly run the subsequent command to scale back the app size: ionic build humanoid -prod.

16.How would you compare Ionic and Apache Cordova?


Ionic and Apache Cordova are designed on the prime of Cordova, in order that they don’t seem to be thought of as competitors. they’re 2 fashionable technologies widely adopted within the marketplace for mobile app development. The mixture of those technologies forms a development platform that is thought as hybrid app development. each frameworks have massive|an outsized|an oversized} community of demon-ridden developers and are employed in large enterprises.

17.How many kinds of storage are offered within the Ionic framework?


There are many sorts of storage offered within the Ionic Framework; a number of them are given below:

  • Local storage
  • SQLite
  • Cookie and session storage
  • indexedDB
  • WebSQL
  • PouchDB
  • Web Service/api storage
  • Cordova storage

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


The current version of the Ionic framework is five.4.6. it had been discharged on twelve Gregorian calendar month 2019. It uses Angular vi or higher than for development. It mainly focuses on the computer programme of your application.

19. What are the disadvantages of Associate in Nursing Ionic Framework?


The disadvantages of Ionic application development framework ar as following:

  • The paucity of functionalities accessible by default in Ionic must be addressed, even though native plugins are unstable and can clash with one another.
  • Ionic application debugging can be difficult and time-consuming due to ambiguous error signals.

20.How to update Cordova plugins?


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

21.What is ion-app?


The ion-app may be an instrumentality component for the total Ionic app. The Ionic project ought to have just one ion-app component and might have several Ionic elements like header, footers, menus, content, etc. of these elements wrapped into the ion-app part after they are given.

22.What are the color names that are bundled in once we created a brand new Ionic four project?


The Ionic framework includes a set of 9 predefined colors, that is employed to alter the color of the many elements. every color may be an assortment of multiple properties, as well as shade and a tint. We are able to apply color to the Associate in Nursing Ionic part by victimizing the color attribute. If you’ve not set any color to the specified component, it sets the first color by default.Primary, secondary, tertiary, danger, warning, success, dark, medium, and light are the set of colours that the Ionic framework by default offers.

23.What ar Native Apps?


Native apps are apps sure enough devices like smartphones, tablets, etc. It is put directly on to the device through the Associate in Nursing application store (Such as Google Play or Apple’s App Store). they’re perpetually live to tell the tale of the device and might be accessed through icons on the device home screen. These apps will use the device notification system and might additionally work offline. a number of the renowned native apps are Camera, Collage-Maker, Google Maps, Facebook, etc.

24.What are Mobile net Apps?


Mobile net apps are internet-enabled apps that have specific practicality for mobile devices. The mobile net apps are accessed through the mobile device’s net browsers. They do not have to be compelled to be downloaded and put in on the device.

25.What are Hybrid Apps?


A hybrid app is Associate in Nursing app, which mixes the weather of each native app and net apps. It is put in on a tool, a bit like the other apps. {they are|they’re} kind of like native apps and are written with net technologies, like HTML, CSS, and JavaScript. they’re fashionable as a result of permitting developers to jot down code for the mobile app once and might deploy on multiple platforms.

26.How are you able to determine a platform (iOS or Android) at runtime within the Ionic application?


Ionic provides a platform service which will be wont to get data concerning the present device. The platform technique provides all of the platforms related to the device. It additionally tells whether or not the app is being viewed from a tablet, mobile device, or a browser and concerning the precise platform like golem, iOS, etc. once the application is loaded on the device, then the Ionic adds CSS categories to the tag. As an example, on iOS devices, Ionic adds platform-ios category to tag.

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


    Ionic PrepareIonic 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 preparation furthermore because it builds the app’s ASCII text file that facilitates to run over the machine of associate degree paper or a tool.

28. What’s ion-grid?


The Ionic grid system could be a powerful mobile-based flexbox system for building a custom layout. The Ionic grid is principally composed of 3 units, that area unit a grid, rows, and columns. The Ionic grid is created of a twelve column layout with completely different breakpoints supporting the screen size.

29.Explain the operation of the associate degree ion-grid part?


Some of the small print that we’d like to grasp whereas operating with the Ionic grid are:

  • Grids act as an instrumentality for rows and columns. It takes the total dimension of their instrumentality, however adding the mounted attribute can specify the dimension per screen size.
  • Rows area unit horizontal teams of columns, and columns area unit an area wherever we have a tendency to place our contents, and solely columns ought to be immediate youngsters of rows.
  • The size attributes indicate the quantity of columns to use out of the default twelve per row. So, size=”4″ may be additional to a column so as to require up to 1/3 of the grid.
  • If columns are unit while not size-worthy, it’ll mechanically take equal widths.
  • Columns have cushioning attributes between individual columns; but, the cushioning may be far away from the grid and columns by victimization no-padding on the grid.
  • The grid contains 5 grid tiers, one for every responsive breakpoint. All breakpoints are unit extra-small, small, medium, large, and extra-large.

30.Name some Ionic elements with temporary descriptions of every?


Some of the vital Ionic elements are:


An alert could be a dialog that notifies the user with vital data to form a choice or offer the flexibility to decide on a particular action or list of actions. It seems to be in the prime of the app content. It may be unemployed manually by the user before resuming interaction with the app.


Buttons are an important unit and thanks to acting with associate degreed navigate through an app. it’s wont to clearly communicate what action can occur once the user clicks on them. The buttons will contain 2 things, that area unit text, icons, or both. It can even be increased with a range of attributes like color, shape, size to seem a particular method.


The Ionic content component is an instrumentality that wraps all alternative parts that we wish to form within the app. The content part permits a straightforward to use content space that contains some helpful ways to manage the scrollable space. within the Ionic app, there ought to be only 1 content part in a very single read. we will additionally customize it by individual styling victimization CSS and also the offered CSS custom properties.

31.Explain the aim of config.xml move into associate degree Ionic project?


Config.xml could be a world configuration file that controls the build settings of the Ionic apps. It controls several aspects of a Cordova application behavior. After you scaffold the Ionic application, a basic config.xml file is generated for you within the commanding directory. This file follows the W3C Package internet Apps (widget) specification. It permits developers to specify information concerning their applications simply. It contains numerous data concerning the project, like package name, version, author’s data, plugins, platform, etc.

32.What is the aim of the ion-infinite-scroll part in Ionic?


The ion-infinite-scroll could be a terribly helpful part after we ought to show an outsized set of knowledge right away within the Ionic application. This part permits to load knowledge into the app once the user scrolls a such distance from the highest or bottom of the page.Every mobile application desires some way to indicate the large set of knowledge in a very lesser range of clicks. In this case, the infinite scroll plays an important role for them. The infinite scroll part works like 10dency to|We tend to} load ten things on a page. Now, once the user scrolls those things and reaches the point of the lowest, it makes a replacement knowledge request. This request gets a subsequent set of records which will be additional to the present things. This method is continuous till the new knowledge isn’t found in chunks as the user scrolls.

33.What is the aim of the ion-refresher part in Ionic?


Refreshing means that change of the presently displayed page so the user will see the newest content. Ionic provides the part to feature pull-to-refresh practicality on a content part. associate Ionic permits the users to drag the page down from the highest on a listing information|of knowledge|of information} exploitation bit to retrieve additional data.

34.What is a Progressive net App?


A progressive net app could be a traditional net app, that appears and appears like native mobile apps. It uses trendy net capabilities to deliver associate app-like expertise to the user. These apps will simply deploy to servers, accessible through URLs, and indexed by search engines.

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


We know that Ionic is designed on ES6 and matter, thus your editors or IDE should support these new languages. the foremost fashionable editors and day, that offer you the foremost effective support for the Ionic application development are:

  • Visual Studio.
  • WebStorm.
  • Atom.

36.What is the Ionic Market?


Ionic team announces Ionic marketplace for Ionic developers World Health Organization wishes to use pre-build starters, themes, plugins, etc. The Ionic Market classes into 3 types: Starters, Plugins, and Themes. The Ionic marketplace makes it simple to submit and get starters, plugins, and themes, additionally as transfer them for your comes. it’s a decent place wherever you’ll sell and buy ionic stuff.

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


These life-cycle events are:

ngOnInit: it’s dismissed once throughout part initialisation. It may be wont to initialize native members and create calls into services, which require to be done just once.It may be helpful for clean-up like unsubscribing from observables.

ionViewWillEnter: it’s dismissed once the part routing-to is on the brink of animate into read.

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


The Ionic hooks have 3 totally different life-cycle, that are given below:

ionNavDidChange: This event is dismissed once the nav has modified parts.

ionNavWillChange: This event is dismissed once the nav can parts.

ionNavWillLoad: This event is dismissed once nav can load a part.

39.How would you correct apps once tested on real devices or emulators?


To correct apps once testing on real devices or emulators, we will use Chrome Remote debugging and different developer tools provided by Google Chrome to identify the problems inside the app. Remote correcting tools enable the United States to debug live content on the automaton device from the raincoat, Linux, or Windows. expedition browser conjointly permits United States similar options for debugging associate iOS applications running on machine or iPhone.

40.Can we tend to use base of operations with Ionic?


Yes, we will use the base of operations with Ionic. It’s one in all the foremost powerful and fashionable databases as a service answer on the market nowadays. The base of operations SDK is additionally on the market as a node module. It may be put inside your project, imported, and might use it.

41.How would you get the list of all the on the market start-up templates for associate Ionic app?


We can show the list of all on the market templates that may be used whereas making a replacement Ionic application by exploitation the subsequent command:

  • ionic begin –list

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


A splash screen is analogous to a begin screen or start-up screen. It’s a graphical management component that contains the image, logo, and current version of the computer code. The splash screen is simply a computer screen that permits users to see one thing whereas the hardware is loaded to give computer code to the user. it always seems once a game or program is launching.

43.Explain async and wait?


The async and wait each are new keywords introduced within the ES2017 to jot down async functions. they’re wont to execute asynchronous code blocks. Basically, it permits you to jot down guarantees in an exceedingly additional legible method. allow us to realize it with the subsequent example:

  • promiseFunction(),3000);
  • })
  • }

The higher than performance can come with a promise, which is able to be resolved in 3000 milliseconds. we will decide the higher than promised performance as below.

  • promiseFunCall() ,
  • rejectData =>
  • );
  • }

Now, we tend to be about to see however guarantees are going to be reborn into the async-await perform. The promiseFunction() can stay similar, and therefore the async-await perform handled however the guarantees are going to be known as. So, the higher than perform promiseFunCall() may be re-written as:

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

44.Explain Events in Ionic?


Events in Ionic could be a publish-subscribe vogue event system, which may be wont to pass messages across totally different parts and pages. In different words, it’s a system for causation and responding to application-level events across your app. we will realize it with the subsequent example wherever one page publishes an occurrence, and therefore the second page subscribes thereto event.

45.When would you utilize an associated AlertController in Ionic?


An alert could be a dialog that notifies the user with vital data to create a choice or offer the power to settle on a particular action or list of actions. It may be pink-slipped manually by the user before resuming interaction with the app. It may be thought of as a floating modal that ought to be used for a fast response like secret verification, little app notifications, and lots of additional.The alert controller is liable for making associate alerts within the Ionic application. It uses create() technique to form associate alert and might be bespoken by passing alert possibility within the create() technique.

46.What is the capacitance in Ionic?


The capacitance could be a cross-platform app, that makes it simple to make internet apps that run natively on iOS, Android, Electron, and therefore the internet with one single code base. These apps may be referred to as Native Progressive internet Apps and represent succeeding evolution on the far side Hybrid apps.It sees as a replacement of Apache Cordova and Adobe Phonegap, inspirationally from alternative fashionable cross-platform tools like React native, however focuses entirely on sanctioning fashionable internet apps to run on all major internet platforms.

47.How do you get a user’s current location in AN ionic framework? however are you able to access portable native practicality in Ionic applications, as an example, the camera?


Ionic doesn’t offer a camera API. However, since Ionic uses plugin design, and it’s supported by Cordova, we will use Cordova plugins in our application. The ionic team provides a group of Cordova extensions with Angular wrappers which may be found at ngCordova. To be able to use Cordova plugins, we’d like to put in the plugin exploitation Ionic command install . In some cases, we have a tendency to in addition have to be compelled to add the plugin’s Angular module to your Angular application. To use a mobile phone’s camera app within the Ionic application, we will decide the camera API by exploiting cordova-plugin-camera that’s hosted on GitHub.

48.How to use observables within the Ionic framework?


In the Ionic framework, observables aren’t specific to Ionic or Angular and that they are a unit supplied with the RxjS library. Observables are a unit sort of a commitment however a great deal of things may be puzzled out from it. It will touch upon multiple prices at a time instead of simply resolving one value at that point. It can even be accustomed to manipulate the information that is related to it. Observables can’t be dead till and unless they’re signed to. varied operations may be applied to observables for modification and returning to a replacement one.

49.What is the Ionic header bar and wherever it’s located?


Headers are unit mounted regions at the highest of the screen which could carry with it title label and left or right buttons to provide navigation or to supply varied actions. The ionic header bar is enforced to make a header on the appliance. The bar category is the main category with a bar-header used for making header bars in-app.

50.What is the Ionic footer bar and wherever it’s located?


Footer could be a root part of a page set at rock bottom of the page. Footer may be a wrapper for ion-toolbar to form positive if the content space is sized properly. Ionic footer bar is enforced to make footer on the appliance. The bar-footer category is employed for making a footer bar within the app.

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


Ionic framework could be a framework for developing mobile applications exploiting HTML5, CSS and Javascript that UI and it’s like native UI elements. It targets multiple platforms like automaton, iOS, Windows with a single code base therefore internet application developers will produce their own mobile apps. Ionic is constructed on the premise of AN Angular framework.

52.What is a Hybrid Application?


Hybrid Application is one that uses native and internet Applications. Native Applications area unit developed for a particular platform and put in on an electronic computer. internet Applications area unit developed for multiple platforms and not put in regionally however created on the market through the web. Hybrid apps are sometimes mentioned within the context of mobile computing. Hybrid mobile apps are a unit developed with a mixture of internet technologies like hypertext markup language, CSS, and Javascript. The key distinction is that hybrid apps are a unit hosted within a native application that uses the mobile platform’s internet read.

53.What is $ionic backdrop?


$ionicBackdrop performs shows and hides background over UI. seems behind popups, loading, and alternative overlays. sometimes multiple UI elements need a background however only 1 background is required in DOM. every part which needs background to be shown calls $ionicVackdrop.retain() once it desires to background then $ionicBackdrop.release() once it’s finished the background. methodology $ionicBackdrop.retain() and $ionicBackdrop.release() is employed for background. $ionicBackdrop.retain() is employed to use overlay over the content. $ionicBackdrop.release() is employed to get rid of Ionic background content. every time once $ionicBackdrop.retain() is termed $ionicBackdrop.release() methodology is termed.

54.What area unit the services and options of the Ionic framework?


Ionic uses Cordova and capacitance plugins to achieve access to host operative systems options like Camera, GPS, Flashlight, etc. Users will build their apps, and that they will then be custom-made for automata, iOS, Windows, Desktop (with Electron_(software_framework), or fashionable browsers. Ionic permits app building and readying by wrapping round the build tool like Cordova or capacitance with a simplified ‘ionic’ command-line tool.The ionic framework includes mobile elements, typography, interactive paradigms, ANd an protrusile base theme. Aside from the SDK, the Ionic framework additionally provides services that developers will use to modify options like code deploys, automatic builds. The ionic framework additionally provides its own Integrated_development_environment called Ionic Studio.

55.What is IONIC?


Ionic is AN ASCII text file SDK for developing hybrid mobile apps developed from 3 minds of grievous bodily harm kill, mountain technologist Adam Bradley in 2013. the {first|The initial} version was first launched in 2013 and designed on prime of AngularJS and Apache Cordova. The most recent version was re-built as a group of internet elements, permitting users to decide on any UI framework like Angular, React or Vue.js. It additionally permits the utilization of Ionic elements with non UI framework. The main issue of Ionic is providing tools and services for developing hybrid mobile, desktop and internet apps supported fashionable internet development technologies and practices, exploiting internet technologies like CSS, HTML5, and Sass.

56.How are you able to discover a platform (Android or iOS) at runtime within the Ionic application?


Ionic provides platform classes: once the appliance is loaded, Ionic adds CSS categories to the tag. For instance, on iOS devices, Ionic adds platform-ios category to tag. Ionic conjointly adds OS version categories like platform-ios8 (for iOS 8) and platform-android4_4 (for golem four.4).

57.What are the new options in Ionic 4?


Ionic is an out and away one in all the foremost widespread and best frameworks out there for developing hybrid apps. The new options essentially revolve around performance, build time enhancements, multi framework compatibility, and new documentation. The newer update provides a tool that is often simply migrated.

Web Components: Ionic has rapt to an internet element for each single element. net element could be a set of net platform Apis that permits developers to make new tailored and reusable markup language tags for net apps and sites. net parts forward its work method to browsers while not the necessity to write down lots of code creating a major improvement in startup and cargo time and essential for building superior apps.

Capacitor: it’s a cross-platform API and code extension layer that eases up to decide native SDKs from net code and write custom native plugins that are needed for the app.

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


    It records the minimum version of the package that the project wants. If we tend to update packages to the most recent version, that may not have any result on package.json. It records the precise version of every package that permits you to re-install them. Future installs are going to be ready to build a standardized dependency.
    The package.json is employed for over dependencies – like process project properties, description, author & license info, scripts, etc. The package-lock.json is all regarding the packages. And protect them to a selected version.
    We cannot build an associate degree Ionic project while not in this file. We are able to build an associate degree Ionic Project while not this.

59.If over one element is {trying|making associate degree attempt|attempting} to create a protocol decision to the same URL, then however are you able to limit creating a pair of network calls?


  • One of the vital areas which might majorly have an effect on the performance of the app is network calls. It ought to be tuned to the best accuracy to create the app perform higher.
  • If 2 completely different parts {trying|making associate degree attempt|attempting} to create a protocol decision to identical URL means that it’s better to create one decision and send information to each of the parts, rather than creating 2 completely different protocol calls. The provided request is completed during a gap of a few seconds.
  • Best thanks to reaching this is often employing a root element. All the parts creating associate degree protocol decisions ought to escort a standard root element. that keeps track of the URLs that are requested a couple of seconds back, if the same is requested once more, then it will add a minimum delay and once response comes, it will send it to each of the parts.

60.What is the distinction between noticeable and Promises?


    Computation doesn’t begin till subscription thus you’ll run then only if you would like the result. Execute forthwith once creation. Provide multiple values over time. offer just one.
    Subscribe technique is employed for error handling that makes centralized and certain error handling. Pushes errors to the kid guarantees. Provides chaining and subscription to handle advanced applications. Uses only .then() clause.

61.What are the instances of Promise and Observable?



  • var promise = new promise((resolve) => , 500)
  • console.log(“Promise started”)
  • })
  • promise.then(data => console.log(“Output”, data))
  • Observable:
  • var noticeable = Rx.Observable.create((observer) => ,200)
  • console.log(“Observer started”)
  • })
  • observable.forEach(x => console.log(“Output is x))

62.Describe in brief the way to produce a service with get and post requests?


Generate a service initial mistreatment ionic generate service command. Import HttpClient from @angular/common/http library. Then add HttpClient to the builder thus it is often utilized in the service. A typical get and post request are often written.

63.What are slides?


Slides could be a UI element. This element is employed as an instrumentality for layouts like ikon galleries, tutorials, questionnaires etc. A slides element will have one or a lot of slides. User will swipe or drag to maneuver to the next slide.

64.Explain with examples of slides?


Below could be a temporary example. Add the 2 functions to element.ts file and also the markup language markup to look at:

  • genderUpdate(gender)
  • 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

65.How are you able to produce a howeverton with rounded corners and description but no background color?


To create a button, we are able to use an ion-button element:

  • Fill attribute will have one in all these 3 choices – solid, define or clear. select solid once you need to fill the background color, select define once you need a skinny border round the button while not background color and select clear once you don’t need any background color or border. Since the necessity is to own a top level view, we tend to use fill=”outline” .
  • Size attribute nominative size of the button. Basically , you specify size once you need the button to be tiny, giant or default.
  • Shape attribute is employed once you need the button to own rounded corners.

66.How will we have a tendency to show tabular knowledge in responsive manner in ionic?


Tabular knowledge may be shown in a very responsive manner exploitation ion-grid UI part.Below example displays vi column layout for size screens (xl, min-width 1200px), four column layout for giant screens (lg, min-width: 992 px), three column layout for medium size screens(md, min-width:768px) , a pair of column layout for little screens(sm, min-width:576px) and single column layout for additional little screens (xs, min-width:0).

67.How to integrate Google login in associate degree Ionic app?


One of the ways in which to integrate google login in associate degree ionic app is by exploitation Cordova and Ionic Native plugins.Run following 2 commands to put in the plugins:

  • ionic cordova plugin add cordova-plugin-googleplus –variable
  • REVERSED_CLIENT_ID=yourreversedclientid
  • npm install –save @ionic-native/google-plus
  • import from ‘@ionic-native/google-plus’;
  • Add GooglePlus in suppliers list in app.module.ts

68.Write associate degree ionic CLI command to form a module file while not its folder?


The command ionic g module creates a folder of same name as module and creates the module at intervals the new folder. To skip making new folder , use –flat possibility which is able to produce the module directly in src/app folder. Below command can produce check.module.ts get in src/app/ . ionic g module check –flat.

69.How are you able to create your ionic app add offline mode ?


Offline mode means that users will still use the app once network association is lost. this will be done by caching API knowledge so it may be used later and a network service to find once your network is lost or out there. to form your app add offline mode, you wish to form associate degree offline manager service that stores requests created throughout that point so we will send the requests once network is obtainable.

70.How are you able to use a custom part in multiple pages ?


Normally, the only thanks to import a part in a very page or another part is by commercialism it within the module file. however we have a tendency to cannot import a custom part in 2 separate modules because it can raise a slip-up alert. So, so as to utilize a custom part sort of a header or footer part, you’ll be able to import the custom part in a very separate module then import the module within the target page’s module file.

71.How are you able to connect your Ionic app with FireStore for CRUD operations ?


Cloud FireStore could be a NoSQL Document based mostly info from base. It keeps the info in set across shopper apps through time period listeners and offers offline support for mobile and internet. exploitation Firestore, we will directly update knowledge from the app.

72.Why Build Native Apps, once Hybrid Apps Development Frameworks ar There?


Some of the subsequent couldn’t be achieved effectively exploitation internet frameworks:

  • Access to platform-specific UI parts, like maps, date pickers, switches, and navigation stacks.
  • Native mobile gesture recognizers.
  • Complex and complicated threading models that facilitate set work onto multiple threads.

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


PhoneGap could be a library that exposes native portable functionalities as JavaScript API. once Adobe purchased PhoneGap, its open supply core was given to the Apache software package Foundation underneath the name Cordova. within the starting, there was virtually no distinction between Cordova and PhoneGap.

74.What ar a number of The Disadvantages Of Building Native Apps?


Even atiny low modification wants a recompile that slows up the developers. This become a nightmare once the codebase is incredibly massive.Testing new practicality is cumbersome.Calls between native and understood setting might find yourself interference UI thread.

75.How does one Persist knowledge Between Application Launches exploitation Ionic Framework?


As Ionic behind the scene builds HTML5 based mostly applications, you’ll be able to use localStorage and sessionStorage API to persist knowledge on the portable. However, since localStorage will solely store strings, objects ought to be stringified before saving. Also, it’s vital to say localStorage has size limit around 5MB.

76.How does one Pass knowledge From One read to a different In Ionic Applications?


Ionic uses AngularJS and UI-router. It means that you’ll be able to use Angular services or UI-router’s state resolve to pass knowledge from one read to a different. Since Angular services ar singletons, knowledge hold on in services may be accessed across alternative Angular controllers.

77.How are you able to Render A 5000 Item List In Ionic, while not moving Scroll Performance?


Ionic provides a collection-repeat directive that renders solely visible things within the DOM. therefore although the list is big, like 5000 in our example, solely things visible in a very viewport ar rendered. Thus, scroll performance isn’t affected.

78.Describe The Advantage Of Caching The Views In Ionic Apps?


Ionic by default caches up to 10 views, that improves performance and conjointly maintains totally different states within the views at constant time. as an example, the cache will maintain scroll position within the views or active state of buttons.

79.How are you able to find A Platform (android Or Ios) At Runtime In Ionic Application?


Ionic provides platform classes: once the appliance is loaded, Ionic adds CSS categories to the tag. as an example, on iOS devices, Ionic adds platform-ios category to tag. Ionic conjointly adds OS version categories like platform-ios8 (for iOS 8) and platform-android4_4 (for humanoid four.4).

80.How are you able to check Ionic Applications?


Ionic applications ar engineered exploitation AngularJS. Angular includes a wealthy set of check libraries and frameworks like shrub and fate check runner. These frameworks may be accustomed write unit tests for Ionic applications. Also, ionic-CLI provides live reload feature therefore the application may be tested within the browser.

Are you looking training with Right Jobs?

Contact Us

Popular Courses