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 and intermediate topics like Shadow DOM in Ionic 4, Virtual Scroll component in Ionic, ion-tabs, etc.
The official Ionic CLI, or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. The CLI can also be used to perform cloud builds and deployments, and administer your account on Ionic Pro.
The Ionic Framework was created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. The initial version was based on AngularJS. After releasing an alpha version of the framework in November 2013, a 1.0 beta was released in March 2014, a 1.0 final in May 2015, and several 2.0 releases in 2016.
Both Ionic and Cordova are available as Node packages that can be installed using Node Package Manager or NPM. To use NPM, we need to install NodeJS first and then using a terminal or command prompt, we can execute the following command to install both Ionic and Cordova in a single go, globally.
npm install ionic cordova -g
Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).
Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.
Currently, Ionic Framework has official integration with Angular, but support for Vue and React are in development.
Ionic 4 depends on Angular’s router module called RouterModule for navigation. The NavController service is still there but it will be deprecated very soon and is therefore not recommended to be used in new Ionic apps built with Ionic 4.
The ion-router-outlet component is used to manage the animations that show up as the user navigates to-from a component within the app. This is same as the router-outlet that Angular has but with some animation related sugar added.
Ionic 4 is one the biggest updates that the Ionic team at Drify Co. has made to the framework. It is a complete re-write of the framework from scratch. The primary changes are:
Lazy loading is a general concept where we only load things as we need them. In Ionic 3, we would use the @IonicPage decorator to lazy load our pages, and now with Ionic 4 we lazy load our Angular components with Angular routing. The idea behind lazy loading pages is that we don’t need to load every page in the application as soon as the application is launched.
Lazy loading web components in Ionic 4 takes this a step further. In Ionic 4, every Ionic component that we use is a web component. Each of these web components will be lazily loaded only when they are accessed in the application.
This means that the code for <ion-button> or <ion-card> will only be loaded when it is accessed in the application, even each <ion-icon> is loaded individually rather than having to load the entire icon library. This isn’t even something we need to set up, it is just the way it works by default.
Although the framework has improved a lot over the last years and the latest version is just amazing. The performance has only increased with Web Components and Lazy Loading but there is a performance gap between a native app and the app built with the Ionic Framework. Ionic Apps still work in a web-view and even though the browsers today are super-powerful, the performance lag is there. It might not be noticeable in many cases, but still, it is there.
Also, since the apps built with Ionic run essentially in a web browser, they have limited access to the devices’ hardware. To get access to the native APIs, like the device’s camera or GPS, we depend on Cordova plugins. If there is not a plugin that fits your need, you need to fall back to the native development. Either you get a plugin developed or you develop the whole app as a native app.
Ionic Framework offers a Storage module that resides in the @ionic/storage package. It allows us to store key-value pairs and JSON objects in a secure reliable storage, however, it has its own set of limits.
Storage uses a variety of storage engines underneath, picking the best one available depending on the platform. When running in a native app context, Storage will prioritize using SQLite, as it's one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.
When running in the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.
First off, we can always get rid if the static assets that are not in use within the app. That reduces the size of the generated executable.
We can also optimize static assets like images, audio and video for mobile devices. That way the app size will reduce considerably. It does not makes sense to use huge images, audio and videos files as a static asset within the app.
Finally, we can get rid of any external modules and cordova plugins that are there but are not being used. Having unnecessary code in the app is an overkill and add a lot of extra bytes to the app’s size.
Ionic apps are built using web technologies and are rendered using Web Views, which are a full screen and full-powered web browser.
Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
An example of a cross-origin request: The frontend JavaScript code for a web application served from http://domain-a.com uses XMLHttpRequest to make a request for http://api.domain-b.com/data.json.
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. Web Views also enforce CORS, and generally it needs to be handled on the server. If CORS is not implemented on the server, there is a native plugin that performs HTTP requests in the native layer which bypasses CORS. So it's important that external services properly handle cross-origin requests.
We can use Chrome remote debugging and other developer tools offered by Google Chrome to spot the issues within the app. Remote debugging allows us to debug live content on an Android device from our Windows, Mac, or Linux computer. Safari also allows similar features to debug an iOS app running on Simulator or a connected iPhone.
App is a container element for the whole Ionic application. There should only be one <ion-app> element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the <ion-app> when they are presented.
Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a shade and tint, used throughout Ionic. These nine colors are, primary, secondary, tertiary, danger, warning, success, dark, medium and light.
There are 3 different lifecycle hooks in Ionic 4. They are as following.
ionic start <app-name> <template-name> --type=angular
The above command generates a new Ionic 4 project with Angular integration.
We can also use Angular Services to share data between multiple pages. An Angular service is a singleton and thus does not get destroyed when the user loads and unloads components within the app. Therefore, the data can be set from one component and it can be retrieved from another component. This is what we need to pass data from one component to another during navigation.
Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc
Ionic on the other hand is a web framework with some additional tools and services that lets you build a responsive mobile app using web technologies like HTML, CSS and JS. Once the web is done, it is packaged into a native app for supported platforms like Android, iOS and Windows using Apache Cordova. So, in short, Ionic uses Apache Cordova to create apps with the help of web technologies for various mobile operating systems.
ion-grid is a powerful mobile-first flexbox system for building custom layouts.
It is composed of three units — a grid, row(s) and column(s)). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
Here are some pointers that we need to keep in mind while working with grids in Ionic.
Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., size-sm="4" applies to small, medium, large, and extra large devices).
config.xml is a global configuration file that controls many aspects of a cordova application's behavior. This platform-agnostic XML file is arranged based on the W3C's Packaged Web Apps (Widgets) specification, and extended to specify core Cordova API features, plugins, and platform-specific settings.
For projects created with the Ionic CLI, this file can be found in the top-level directory. It contains vital information about the project like the package name, version, author’s information and a lot of permissions and specifications as well.
When a user interacts with an application in the form of a keyboard movement, a mouse click, or a mouseover, it generates an event. These events need to be handled to perform some kind of action. This is where event binding comes into picture.
Event binding allows us to define methods that are executed every time and event happens. These methods are “bound” to these events or the other way around is also true. Hence the name Event Binding.
ion-infinite-scroll component is very useful component. It allows to load data into the app (typically in a list) as the users scrolls the page. The most common use case is where the app loads more content to display to the user as the user keeps scrolling the page. This concept is used widely nowadays in almost all modern apps.
The Infinite Scroll allows us to perform an action when the user scrolls a specified distance from the bottom or top of the page. The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance.
The Refresher provides pull-to-refresh functionality on a content component. It is a functionality that allows the users to pull the page down from the top and as they let it go, the content on the page is refreshed.
To use it, we place the ion-refresher as the first child of our ion-content element. Pages can then listen to the refresher's various output events. The refresh output event is fired when the user has pulled down far enough to kick off the refreshing process. Once the async operation has completed and the refreshing should end, call complete().
ionic start --list command displays the list of all the available templates that can be used while creating a new Ionic application. As for Ionic 4, as of now, only blank and sidemenu are available
These are the events:
ionNavDidChange event is fired when the nav has changed components.
ionNavWillChange event is fired when the nav will components.
ionNavWillLoad event is fired when Nav will load a component.
TypeScript.
Yes, absolutely. Firebase SDK is also available as a Node module and we can install it within our Ionic project, import it and it is ready to be used.
Step 1: Import the IonicStorageModule class from @ionic/storage package in your main module file.
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
 declarations: [
  // ...
 ],
 imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp),
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  // ...
 ],
 providers: [
  // ...
 ]
})
export class AppModule {}Step 2: Add the IonicStorageModule to the imports array in the @NgModule decorator of the main module.
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
 declarations: [
  // ...
 ],
 imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp),
  IonicStorageModule.forRoot()
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  // ...
 ],
 providers: [
  // ...
 ]
})
export class AppModule {}Step 3: Open the TypeScript class for the page that you want to use the storage services on and import the Storage class from @ionic/storage package.
import { Component } from '@angular/core'
import { Storage } from '@ionic/storage'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
Â
}Step 4: Inject the Storage service into the class by passing it to the constructor.
import { Component } from '@angular/core'
import { Storage } from '@ionic/storage'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
Â
 constructor(private storage: Storage){
Â
}
Â
}Step 5: Use the set and get methods to use the service and store the user’s email.
import { Component } from '@angular/core'
import { Storage } from '@ionic/storage'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
Â
 constructor(private storage: Storage){
 // set a key/value
  storage.set('name', 'Max');
 // Or to get a key/value pair
  storage.get('age').then((val) => {
   console.log('Your age is', val);
  });
}
Â
} Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS.
It can be helpful to think of components that use Shadow DOM as standalone modules for HTML. Markup and styles are isolated to their own DOM tree, and removed from the global context. This enables us to unlock some pretty incredible benefits:
Typically, Shadow DOM is associated with Custom Elements, but we can still use Shadow DOM with regular HTML elements. In fact, most browsers use Shadow DOM without you even noticing. For example, every time we use video tag, we’re actually using an element that has Shadow DOM. Think about it, devs just need to write the <video> element, supply a video source, and set a few attributes on the HTML. But parts of the video element, like video controls, are automatically created. Developers don’t actually have to provide their own play button, progress bar, volume control, they’re automatically provided. This is Shadow DOM in action!
While Shadow DOM has been around for a few years now, it’s reached the point where we can finally take advantage of it in modern browsers. For the older browsers that are still around, we got them covered too, with on-the-fly polyfills being loaded. If a browser doesn’t support native Shadow DOM, we can polyfill it on-demand. However, if a browser already has native support, Ionic never downloads and parses any unnecessary polyfill JavaScript, but rather just uses the built in API.
<ion-back-button> is the component used to implement a back button to the navigation/header bar in an Ionic 4 app. This button is automatically added if the component is used and the app’s navigation allows the app to navigate back. If the navigation implemented does not allow the app to navigate back, then the back button is automatically hidden. A typical usage would look like this.
[insert gist https://snippets.cacher.io/snippet/a22122de843c3ff721f3]
Virtual Scroll displays a virtual, "infinite" list. An array of records is passed to the virtual scroll containing the data to create templates for. The template created for each record, referred to as a cell, can consist of items, headers, and footers. For performance reasons, not every record in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls.
Considering a huge array of items called items, the virtual scroll implementation would look like the following.
[insert gist https://snippets.cacher.io/snippet/67500f6889909a534031]
In v4, lazy loading is done via the loadChildren method of the Angular router. Typically, a lazy-loaded module would look this this in the app’s main module file.
[insert gist https://snippets.cacher.io/snippet/aa85a3ee0c7905db13f7]
In the code above, the loadChildren method loads the module lazily when the user navigates to the corresponding path in the app.
In the previous versions of Ionic, we used the NavController class to perform push-pop style navigation within the app. In Ionic 4, the NavController is still there with bare minimum features but it does not allow a lot of advanced yet useful requirements. So the recommended way of Navigation in Ionic 4 is to use the Angular Router.
We simple define a route for each page in the app in the Routing module file (generally names a (app-routing.module.ts) and then we can use the routerLink directive or the navigate method of the Router class.
If there is a Cordova plugin available for the Payment provider, the task becomes very easy. We install the Cordova plugin and write the code accordingly. For example, Instamojo and Razorpay have Cordova plugins. However, of no Cordova plugin is available, for example, PayUMoney or PayTM, we need to do everything manually and make use of in-app browser to carry out the transaction.
Each payment provider offers documentation (the web-integration documentation) on how there service accepts and provides data to the interacting app. Developers need to read these documentation and precisely follow the documents.
Developers need to create a request that generally follows a very specific set of protocol and parameters. These parameters are encoded and ordered according to the documents. This request also carries customer’s and order’s information. It also contains the transaction amount. The actual request and parameters may vary from provider to provider. Sometime this request also requires a checksum that verifies the parameters as they are received by the payment processing service.
Once the request is sent (using an HTTP GET), the service provider sends an HTML response or a URL back to the app. The app then loads the HTML or the URL in an in-app browser and the payment processor takes care of the transaction from here.
Once the transaction is finished, the in-app browser is closed and the user is brought back to the app and displayed appropriate messages.
Tabs (or ion-tabs) component are a top level navigation component for created multiple stacked navs. The component is a container of individual Tab (ion-tab) components. These two components are used in combination to create a tabbed interface within the app. Each ion-tab corresponds to a tab in the parent Tabs container.
[insert gist https://snippets.cacher.io/snippet/aebfabfe8278c4511627]
This is a special syntax to work with promises in a more comfort fashion, called “async/await”. It’s surprisingly easy to understand and use. async and await are used in combination.
The keyword async before a function means one simple thing: a function always returns a promise. If the code has return <non-promise> in it, then JavaScript automatically wraps it into a resolved promise with that value. So, async ensures that the function returns a promise, wraps non-promises in it. Simple enough, right? But not only that. There’s another keyword await that works only inside async functions, and it’s pretty cool.
The keyword await makes JavaScript wait until that promise settles and returns its result. So the code will not execute any further until the awaited Promise returns.
An exciting new feature used with Angular is the Observable. This isn't an Angular specific feature, but rather a proposed standard for managing async data that will be included in the release of ES7. Observables open up a continuous channel of communication in which multiple values of data can be emitted over time.
Observables are lazy collections of multiple values over time.
An Observable is a function that is capable of returning multiple values over time. It can be subscribed to and all the subscribers receive a copy of the value/data that the observable returns, everytime it returns some value.
Another important feature of Observables is that they can be cancelled anytime. With promises this is different, you can’t cancel a promise. If the promise is handed to you, the process that will produce that promise’s resolution is already underway, and you generally don’t have access to prevent that promise’s resolution from executing.
The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page. The ion-inifnite-scroll is a component that needs to be placed at the bottom inside the ion-content.
The expression assigned to the ionInfinite event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the complete() method on the infinite scroll instance.
Here is a simple example usage of ion-infinite-scroll component.
[insert gist https://snippets.cacher.io/snippet/04f1861105d2f5b74917]
The above code calls the loadData method every time the user scrolls and reaches to the bottom of the page. This function is then responsible to load new data and add it to the end of the list.
Ionic 4 uses Angular Router and therefore we have to use the ActivatedRoute service to send simple parameters from one page to another. To pass parameters, we need to add the parameter to the route definition as well. Here is an example.
[insert gist https://snippets.cacher.io/snippet/94583076223a5a71a8c6]
In the code snippet above, you can see that the profile/:id path specifies a parameter to be passed to the route in the URL itself. This parameter can then be retrieved on the ProfileComponent using the ActivatedRouter service in Angular.
[insert gist https://snippets.cacher.io/snippet/a682c9f95e940c18835d]
Another option, which is more suited for passing objects (and not simple strings or numbers) as parameters is the user of Angular Services.
Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it. There are three view encapsulation types:
ViewEncapsulation.None
Angular doesn’t use Shadow DOM at all. Styles applied to our component are written to the document head.
ViewEncapsulation.Emulated
This view encapsulation is used by default. ViewEncapsulation.Emulated emulates style encapsulation, even if no Shadow DOM is available. This is a very powerful feature in case you want to use a third-party component that comes with styles that might affect your application.
ViewEncapsulation.Native
Last but not least, we have the native Shadow DOM view encapsulation. This one is super simple to understand since it basically just makes Angular using native Shadow DOM.
ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component. ionViewDidLoad is related to the Ionic's NavController lifeCycle events. It runs when the page has loaded. This event only happens once per page being created.
Basically both are good places for initializing the component's data.
But for using ngOnInit you need to implement the Angular's OnInit class, In the other hand ionViewDidLoad could be only defined for components that are pushed/popped from a NavController. So we can say that we should use the ionViewDidLoad for components in the NavController stack and ngOnInit for other components.
Progressive Web Apps are a new way to offer incredible mobile app experiences that are highly optimized, reliable, and accessible completely on the web. A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to servers, accessible through URLs, and indexed by search engines.
To be considered a Progressive Web App, your app must be:
This can work in conjunction with Cordova to provide a multiple deploy targets for all your users. You can deploy your app as a PWA as well as Native app and take advantage of both channels.
The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an @angular/pwa package that can be used to automate this. The @angular/pwa package will automatically add a service worker and a app manifest to the app. To add this package to the app run:
ng add @angular/pwa
Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA.
To add an image as the splash screen of an Ionic app, we put the new image (that we want to use as the new splash screen) in the resources folder inside the app’s project directory. The file name should be exactly splash.jpg|png|psd. Yes, you can use any of the three formats.
The recommended size of splash image is 2732px X 2732px.
Once you have the file in place, you can execute the following command and generate image resources for all the platforms that are added to your project.
ionic resources
This command generates images for various screen sizes and resolutions. Everything is taken care of after this when you build the app using Ionic CLI and Cordova.
Next, you build the app again and your new splash screen should be displayed as your app launches on the device. Keep in mind that this can only be tested inside an emulator/simulator or real device, and not in the browser.
To add an image as the icon of an Ionic app, we put the new image (that we want to use as the new icon) in the resources folder inside the app’s project directory. The file name should be exactly icon.jpg|png|psd. Yes, you can use any of the three formats.
The recommended size of the icon image is 1024px X 1024px.
Once you have the file in place, you can execute the following command and generate image resources for all the platforms that are added to your project. This command generates images for various screen sizes and resolutions. Everything is taken care of after this when you build the app using Ionic CLI and Cordova.
Next, you build the app again and your new icon should be displayed as your app is installed on the device. Sometimes, you may have to uninstall the previous versions of the app from the device to see the changes icon.
Keep in mind that this can only be tested inside an emulator/simulator or real device, and not in the browser.
The first step is to generate a release build of the app using the Ionic CLI. The following command generate the release build for Android. It assumes that the Android platform is already added to the project but even if it is not, it is automatically added.
ionic cordova build android --release
Once the build command is finished, a new file called app-release.apk or android-release.apk or similar is generated in your project directory. You can find the path by looking at the logs when you run the above command. It is there inside the platforms/android directory.
Once you have the release APK, you sign it using the keystore that you need to have generated. Once the APK is signed, you generated a new APK which is the release + signed APK. You then use the zipalign utility to optimize this APK and process it for the final run. After this is done, you can upload the then generated file to Google Play Store.
Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic mobile app easy. We can use any of the available community made Cordova plugins in an Ionic application easily with the help of Ionic Native. Ionic Native is not required but it helps to write code better. We can integrate Cordova plugins without using Ionic Native as well, but Ionic Native adds types to these plugins using wrapper classes and thus lets us use intellisense and code suggestions.
This prevents is from running into errors and write the code quicker. For beginners, it is a very big help. More and more plugins are being added to the Ionic Native directory.
routerLink is a directive provided by the RouterModule in Angular (and now in Ionic as well). It allows us to link to routes from within the templates just like the href attribute in HTML. Once, the routerLink is defined on any HTML or Angular component, the component can then be click to navigate to the corresponding path in the project.
If the link is static, you can use the directive as follows
<a routerLink="/user/bob">link to user component</a>
routerLink is one of the core directives used for navigation in Ionic 4 apps.
HttpClientModule is a module provided by the @angular/common/http package that has the classes and services that we can use to implement a network interface in our Ionic 4 and Angular Apps.
Once the module has been imported and added to the main project module, the HttpClient class can be used to make network requests to any web-services or APIs.
The Platform service can be used to get information about the current device running the app. We can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). We can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information we can completely customize our app to fit any device and even perform differential actions in the app based on the platform.
All apps that need some sort of user interaction either collection information from the user or display information to the user. An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a title, subTitle and message.
An AlertController is service in Ionic that is used to display an Alert to the user. This alert is automatically styled according to the platform the app is running on.
We can pass all of the alert's options in the first argument of the create method: create(opts). Otherwise the alert's instance has methods to add options, such as setTitle() or addButton().
Events is a publish-subscribe style event system for sending and responding to application-level events across your app. We can publish an event from anywhere in our app in response to certain action done by the user or anything like that and all the subscribers of that event will be notified accordingly. This is really handy if we need to update content on one page in response to an action on another page within the app in real-time.
LoadingController service can be used to display a Loading component to the user for as long as the app is busy doing something in the background. A Loading component can display an animated spinner and some text as well that tells the user about the task that the app is busy with.
The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation.
skeleton-text is a component for rendering placeholder content. The element will render a gray block at the specified width. It has been introduced in Ionic 4 and it very useful when displayed to the user while the actual content is being loaded from an API or web-service.
split-pane is a component that makes it possible to create multi-view layout. Similar to iPad apps, SplitPane allows UI elements, like Menus, to be displayed as the viewport increases.
If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again. This is especially useful when creating an app that will be served over a browser or deployed through the app store to phones and tablets.
By default, SplitPane will expand when the screen is larger than 768px. If you want to customize this, use the when input. The when input can accept any valid media query, as it uses matchMedia() underneath. Here is an example,
<!-- could be "xs", "sm", "md", "lg", or "xl" → <ion-split-pane when="lg"></ion-split-pane>
Ionic Native uses Cordova plugins and Cordova plugins do not work in the browser. To test these functionalities, the app needs to be tested on an emulator or a real device. On a browser, the plugins will always raise errors about Cordova not being available.
To debug, we can use Chrome Remote Debugging to look at the logs as the app runs on a device/emulator.
Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps "Native Progressive Web Apps" and they represent the next evolution beyond Hybrid apps.
Capacitor provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible, while accessing rich native device features on platforms that support them. Adding native functionality is easy with a simple Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.
Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap, with inspiration from other popular cross-platform tools like React Native and Turbolinks, but focused entirely on enabling modern web apps to run on all major platforms with ease. Capacitor has backwards-compatible support for many existing Cordova plugins.
It is functionally pretty similar to Apache Cordova (formerly known as PhoneGap) which can be viewed as a predecessor to Capacitor but differs in some important areas and technology choices.
The official Ionic CLI, or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. The CLI can also be used to perform cloud builds and deployments, and administer your account on Ionic Pro.
The Ionic Framework was created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. The initial version was based on AngularJS. After releasing an alpha version of the framework in November 2013, a 1.0 beta was released in March 2014, a 1.0 final in May 2015, and several 2.0 releases in 2016.
Both Ionic and Cordova are available as Node packages that can be installed using Node Package Manager or NPM. To use NPM, we need to install NodeJS first and then using a terminal or command prompt, we can execute the following command to install both Ionic and Cordova in a single go, globally.
npm install ionic cordova -g
Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).
Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.
Currently, Ionic Framework has official integration with Angular, but support for Vue and React are in development.
Ionic 4 depends on Angular’s router module called RouterModule for navigation. The NavController service is still there but it will be deprecated very soon and is therefore not recommended to be used in new Ionic apps built with Ionic 4.
The ion-router-outlet component is used to manage the animations that show up as the user navigates to-from a component within the app. This is same as the router-outlet that Angular has but with some animation related sugar added.
Ionic 4 is one the biggest updates that the Ionic team at Drify Co. has made to the framework. It is a complete re-write of the framework from scratch. The primary changes are:
Lazy loading is a general concept where we only load things as we need them. In Ionic 3, we would use the @IonicPage decorator to lazy load our pages, and now with Ionic 4 we lazy load our Angular components with Angular routing. The idea behind lazy loading pages is that we don’t need to load every page in the application as soon as the application is launched.
Lazy loading web components in Ionic 4 takes this a step further. In Ionic 4, every Ionic component that we use is a web component. Each of these web components will be lazily loaded only when they are accessed in the application.
This means that the code for <ion-button> or <ion-card> will only be loaded when it is accessed in the application, even each <ion-icon> is loaded individually rather than having to load the entire icon library. This isn’t even something we need to set up, it is just the way it works by default.
Although the framework has improved a lot over the last years and the latest version is just amazing. The performance has only increased with Web Components and Lazy Loading but there is a performance gap between a native app and the app built with the Ionic Framework. Ionic Apps still work in a web-view and even though the browsers today are super-powerful, the performance lag is there. It might not be noticeable in many cases, but still, it is there.
Also, since the apps built with Ionic run essentially in a web browser, they have limited access to the devices’ hardware. To get access to the native APIs, like the device’s camera or GPS, we depend on Cordova plugins. If there is not a plugin that fits your need, you need to fall back to the native development. Either you get a plugin developed or you develop the whole app as a native app.
Ionic Framework offers a Storage module that resides in the @ionic/storage package. It allows us to store key-value pairs and JSON objects in a secure reliable storage, however, it has its own set of limits.
Storage uses a variety of storage engines underneath, picking the best one available depending on the platform. When running in a native app context, Storage will prioritize using SQLite, as it's one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.
When running in the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.
First off, we can always get rid if the static assets that are not in use within the app. That reduces the size of the generated executable.
We can also optimize static assets like images, audio and video for mobile devices. That way the app size will reduce considerably. It does not makes sense to use huge images, audio and videos files as a static asset within the app.
Finally, we can get rid of any external modules and cordova plugins that are there but are not being used. Having unnecessary code in the app is an overkill and add a lot of extra bytes to the app’s size.
Ionic apps are built using web technologies and are rendered using Web Views, which are a full screen and full-powered web browser.
Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed through a bridge layer, typically by using native plugins which expose JavaScript APIs.
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application makes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
An example of a cross-origin request: The frontend JavaScript code for a web application served from http://domain-a.com uses XMLHttpRequest to make a request for http://api.domain-b.com/data.json.
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. Web Views also enforce CORS, and generally it needs to be handled on the server. If CORS is not implemented on the server, there is a native plugin that performs HTTP requests in the native layer which bypasses CORS. So it's important that external services properly handle cross-origin requests.
We can use Chrome remote debugging and other developer tools offered by Google Chrome to spot the issues within the app. Remote debugging allows us to debug live content on an Android device from our Windows, Mac, or Linux computer. Safari also allows similar features to debug an iOS app running on Simulator or a connected iPhone.
App is a container element for the whole Ionic application. There should only be one <ion-app> element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the <ion-app> when they are presented.
Ionic has nine default colors that can be used to change the color of many components. Each color is actually a collection of multiple properties, including a shade and tint, used throughout Ionic. These nine colors are, primary, secondary, tertiary, danger, warning, success, dark, medium and light.
There are 3 different lifecycle hooks in Ionic 4. They are as following.
ionic start <app-name> <template-name> --type=angular
The above command generates a new Ionic 4 project with Angular integration.
We can also use Angular Services to share data between multiple pages. An Angular service is a singleton and thus does not get destroyed when the user loads and unloads components within the app. Therefore, the data can be set from one component and it can be retrieved from another component. This is what we need to pass data from one component to another during navigation.
Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc
Ionic on the other hand is a web framework with some additional tools and services that lets you build a responsive mobile app using web technologies like HTML, CSS and JS. Once the web is done, it is packaged into a native app for supported platforms like Android, iOS and Windows using Apache Cordova. So, in short, Ionic uses Apache Cordova to create apps with the help of web technologies for various mobile operating systems.
ion-grid is a powerful mobile-first flexbox system for building custom layouts.
It is composed of three units — a grid, row(s) and column(s)). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
Here are some pointers that we need to keep in mind while working with grids in Ionic.
Grid tiers are based on minimum widths, meaning they apply to their tier and all those larger than them (e.g., size-sm="4" applies to small, medium, large, and extra large devices).
config.xml is a global configuration file that controls many aspects of a cordova application's behavior. This platform-agnostic XML file is arranged based on the W3C's Packaged Web Apps (Widgets) specification, and extended to specify core Cordova API features, plugins, and platform-specific settings.
For projects created with the Ionic CLI, this file can be found in the top-level directory. It contains vital information about the project like the package name, version, author’s information and a lot of permissions and specifications as well.
When a user interacts with an application in the form of a keyboard movement, a mouse click, or a mouseover, it generates an event. These events need to be handled to perform some kind of action. This is where event binding comes into picture.
Event binding allows us to define methods that are executed every time and event happens. These methods are “bound” to these events or the other way around is also true. Hence the name Event Binding.
ion-infinite-scroll component is very useful component. It allows to load data into the app (typically in a list) as the users scrolls the page. The most common use case is where the app loads more content to display to the user as the user keeps scrolling the page. This concept is used widely nowadays in almost all modern apps.
The Infinite Scroll allows us to perform an action when the user scrolls a specified distance from the bottom or top of the page. The expression assigned to the infinite event is called when the user scrolls to the specified distance. When this expression has finished its tasks, it should call the complete() method on the infinite scroll instance.
The Refresher provides pull-to-refresh functionality on a content component. It is a functionality that allows the users to pull the page down from the top and as they let it go, the content on the page is refreshed.
To use it, we place the ion-refresher as the first child of our ion-content element. Pages can then listen to the refresher's various output events. The refresh output event is fired when the user has pulled down far enough to kick off the refreshing process. Once the async operation has completed and the refreshing should end, call complete().
ionic start --list command displays the list of all the available templates that can be used while creating a new Ionic application. As for Ionic 4, as of now, only blank and sidemenu are available
These are the events:
ionNavDidChange event is fired when the nav has changed components.
ionNavWillChange event is fired when the nav will components.
ionNavWillLoad event is fired when Nav will load a component.
TypeScript.
Yes, absolutely. Firebase SDK is also available as a Node module and we can install it within our Ionic project, import it and it is ready to be used.
Step 1: Import the IonicStorageModule class from @ionic/storage package in your main module file.
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
 declarations: [
  // ...
 ],
 imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp),
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  // ...
 ],
 providers: [
  // ...
 ]
})
export class AppModule {}Step 2: Add the IonicStorageModule to the imports array in the @NgModule decorator of the main module.
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
 declarations: [
  // ...
 ],
 imports: [
  BrowserModule,
  IonicModule.forRoot(MyApp),
  IonicStorageModule.forRoot()
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  // ...
 ],
 providers: [
  // ...
 ]
})
export class AppModule {}Step 3: Open the TypeScript class for the page that you want to use the storage services on and import the Storage class from @ionic/storage package.
import { Component } from '@angular/core'
import { Storage } from '@ionic/storage'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
Â
}Step 4: Inject the Storage service into the class by passing it to the constructor.
import { Component } from '@angular/core'
import { Storage } from '@ionic/storage'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
Â
 constructor(private storage: Storage){
Â
}
Â
}Step 5: Use the set and get methods to use the service and store the user’s email.
import { Component } from '@angular/core'
import { Storage } from '@ionic/storage'
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
Â
 constructor(private storage: Storage){
 // set a key/value
  storage.set('name', 'Max');
 // Or to get a key/value pair
  storage.get('age').then((val) => {
   console.log('Your age is', val);
  });
}
Â
} Shadow DOM is an API that is part of the Web Component model. It helps to isolate component internals, protecting users from breaking changes and global CSS.
It can be helpful to think of components that use Shadow DOM as standalone modules for HTML. Markup and styles are isolated to their own DOM tree, and removed from the global context. This enables us to unlock some pretty incredible benefits:
Typically, Shadow DOM is associated with Custom Elements, but we can still use Shadow DOM with regular HTML elements. In fact, most browsers use Shadow DOM without you even noticing. For example, every time we use video tag, we’re actually using an element that has Shadow DOM. Think about it, devs just need to write the <video> element, supply a video source, and set a few attributes on the HTML. But parts of the video element, like video controls, are automatically created. Developers don’t actually have to provide their own play button, progress bar, volume control, they’re automatically provided. This is Shadow DOM in action!
While Shadow DOM has been around for a few years now, it’s reached the point where we can finally take advantage of it in modern browsers. For the older browsers that are still around, we got them covered too, with on-the-fly polyfills being loaded. If a browser doesn’t support native Shadow DOM, we can polyfill it on-demand. However, if a browser already has native support, Ionic never downloads and parses any unnecessary polyfill JavaScript, but rather just uses the built in API.
<ion-back-button> is the component used to implement a back button to the navigation/header bar in an Ionic 4 app. This button is automatically added if the component is used and the app’s navigation allows the app to navigate back. If the navigation implemented does not allow the app to navigate back, then the back button is automatically hidden. A typical usage would look like this.
[insert gist https://snippets.cacher.io/snippet/a22122de843c3ff721f3]
Virtual Scroll displays a virtual, "infinite" list. An array of records is passed to the virtual scroll containing the data to create templates for. The template created for each record, referred to as a cell, can consist of items, headers, and footers. For performance reasons, not every record in the list is rendered at once; instead a small subset of records (enough to fill the viewport) are rendered and reused as the user scrolls.
Considering a huge array of items called items, the virtual scroll implementation would look like the following.
[insert gist https://snippets.cacher.io/snippet/67500f6889909a534031]
In v4, lazy loading is done via the loadChildren method of the Angular router. Typically, a lazy-loaded module would look this this in the app’s main module file.
[insert gist https://snippets.cacher.io/snippet/aa85a3ee0c7905db13f7]
In the code above, the loadChildren method loads the module lazily when the user navigates to the corresponding path in the app.
In the previous versions of Ionic, we used the NavController class to perform push-pop style navigation within the app. In Ionic 4, the NavController is still there with bare minimum features but it does not allow a lot of advanced yet useful requirements. So the recommended way of Navigation in Ionic 4 is to use the Angular Router.
We simple define a route for each page in the app in the Routing module file (generally names a (app-routing.module.ts) and then we can use the routerLink directive or the navigate method of the Router class.
If there is a Cordova plugin available for the Payment provider, the task becomes very easy. We install the Cordova plugin and write the code accordingly. For example, Instamojo and Razorpay have Cordova plugins. However, of no Cordova plugin is available, for example, PayUMoney or PayTM, we need to do everything manually and make use of in-app browser to carry out the transaction.
Each payment provider offers documentation (the web-integration documentation) on how there service accepts and provides data to the interacting app. Developers need to read these documentation and precisely follow the documents.
Developers need to create a request that generally follows a very specific set of protocol and parameters. These parameters are encoded and ordered according to the documents. This request also carries customer’s and order’s information. It also contains the transaction amount. The actual request and parameters may vary from provider to provider. Sometime this request also requires a checksum that verifies the parameters as they are received by the payment processing service.
Once the request is sent (using an HTTP GET), the service provider sends an HTML response or a URL back to the app. The app then loads the HTML or the URL in an in-app browser and the payment processor takes care of the transaction from here.
Once the transaction is finished, the in-app browser is closed and the user is brought back to the app and displayed appropriate messages.
Tabs (or ion-tabs) component are a top level navigation component for created multiple stacked navs. The component is a container of individual Tab (ion-tab) components. These two components are used in combination to create a tabbed interface within the app. Each ion-tab corresponds to a tab in the parent Tabs container.
[insert gist https://snippets.cacher.io/snippet/aebfabfe8278c4511627]
This is a special syntax to work with promises in a more comfort fashion, called “async/await”. It’s surprisingly easy to understand and use. async and await are used in combination.
The keyword async before a function means one simple thing: a function always returns a promise. If the code has return <non-promise> in it, then JavaScript automatically wraps it into a resolved promise with that value. So, async ensures that the function returns a promise, wraps non-promises in it. Simple enough, right? But not only that. There’s another keyword await that works only inside async functions, and it’s pretty cool.
The keyword await makes JavaScript wait until that promise settles and returns its result. So the code will not execute any further until the awaited Promise returns.
An exciting new feature used with Angular is the Observable. This isn't an Angular specific feature, but rather a proposed standard for managing async data that will be included in the release of ES7. Observables open up a continuous channel of communication in which multiple values of data can be emitted over time.
Observables are lazy collections of multiple values over time.
An Observable is a function that is capable of returning multiple values over time. It can be subscribed to and all the subscribers receive a copy of the value/data that the observable returns, everytime it returns some value.
Another important feature of Observables is that they can be cancelled anytime. With promises this is different, you can’t cancel a promise. If the promise is handed to you, the process that will produce that promise’s resolution is already underway, and you generally don’t have access to prevent that promise’s resolution from executing.
The Infinite Scroll component calls an action to be performed when the user scrolls a specified distance from the bottom or top of the page. The ion-inifnite-scroll is a component that needs to be placed at the bottom inside the ion-content.
The expression assigned to the ionInfinite event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the complete() method on the infinite scroll instance.
Here is a simple example usage of ion-infinite-scroll component.
[insert gist https://snippets.cacher.io/snippet/04f1861105d2f5b74917]
The above code calls the loadData method every time the user scrolls and reaches to the bottom of the page. This function is then responsible to load new data and add it to the end of the list.
Ionic 4 uses Angular Router and therefore we have to use the ActivatedRoute service to send simple parameters from one page to another. To pass parameters, we need to add the parameter to the route definition as well. Here is an example.
[insert gist https://snippets.cacher.io/snippet/94583076223a5a71a8c6]
In the code snippet above, you can see that the profile/:id path specifies a parameter to be passed to the route in the URL itself. This parameter can then be retrieved on the ProfileComponent using the ActivatedRouter service in Angular.
[insert gist https://snippets.cacher.io/snippet/a682c9f95e940c18835d]
Another option, which is more suited for passing objects (and not simple strings or numbers) as parameters is the user of Angular Services.
Angular comes with view encapsulation built in, which enables us to use Shadow DOM or even emulate it. There are three view encapsulation types:
ViewEncapsulation.None
Angular doesn’t use Shadow DOM at all. Styles applied to our component are written to the document head.
ViewEncapsulation.Emulated
This view encapsulation is used by default. ViewEncapsulation.Emulated emulates style encapsulation, even if no Shadow DOM is available. This is a very powerful feature in case you want to use a third-party component that comes with styles that might affect your application.
ViewEncapsulation.Native
Last but not least, we have the native Shadow DOM view encapsulation. This one is super simple to understand since it basically just makes Angular using native Shadow DOM.
ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component. ionViewDidLoad is related to the Ionic's NavController lifeCycle events. It runs when the page has loaded. This event only happens once per page being created.
Basically both are good places for initializing the component's data.
But for using ngOnInit you need to implement the Angular's OnInit class, In the other hand ionViewDidLoad could be only defined for components that are pushed/popped from a NavController. So we can say that we should use the ionViewDidLoad for components in the NavController stack and ngOnInit for other components.
Progressive Web Apps are a new way to offer incredible mobile app experiences that are highly optimized, reliable, and accessible completely on the web. A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to servers, accessible through URLs, and indexed by search engines.
To be considered a Progressive Web App, your app must be:
This can work in conjunction with Cordova to provide a multiple deploy targets for all your users. You can deploy your app as a PWA as well as Native app and take advantage of both channels.
The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an @angular/pwa package that can be used to automate this. The @angular/pwa package will automatically add a service worker and a app manifest to the app. To add this package to the app run:
ng add @angular/pwa
Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA.
To add an image as the splash screen of an Ionic app, we put the new image (that we want to use as the new splash screen) in the resources folder inside the app’s project directory. The file name should be exactly splash.jpg|png|psd. Yes, you can use any of the three formats.
The recommended size of splash image is 2732px X 2732px.
Once you have the file in place, you can execute the following command and generate image resources for all the platforms that are added to your project.
ionic resources
This command generates images for various screen sizes and resolutions. Everything is taken care of after this when you build the app using Ionic CLI and Cordova.
Next, you build the app again and your new splash screen should be displayed as your app launches on the device. Keep in mind that this can only be tested inside an emulator/simulator or real device, and not in the browser.
To add an image as the icon of an Ionic app, we put the new image (that we want to use as the new icon) in the resources folder inside the app’s project directory. The file name should be exactly icon.jpg|png|psd. Yes, you can use any of the three formats.
The recommended size of the icon image is 1024px X 1024px.
Once you have the file in place, you can execute the following command and generate image resources for all the platforms that are added to your project. This command generates images for various screen sizes and resolutions. Everything is taken care of after this when you build the app using Ionic CLI and Cordova.
Next, you build the app again and your new icon should be displayed as your app is installed on the device. Sometimes, you may have to uninstall the previous versions of the app from the device to see the changes icon.
Keep in mind that this can only be tested inside an emulator/simulator or real device, and not in the browser.
The first step is to generate a release build of the app using the Ionic CLI. The following command generate the release build for Android. It assumes that the Android platform is already added to the project but even if it is not, it is automatically added.
ionic cordova build android --release
Once the build command is finished, a new file called app-release.apk or android-release.apk or similar is generated in your project directory. You can find the path by looking at the logs when you run the above command. It is there inside the platforms/android directory.
Once you have the release APK, you sign it using the keystore that you need to have generated. Once the APK is signed, you generated a new APK which is the release + signed APK. You then use the zipalign utility to optimize this APK and process it for the final run. After this is done, you can upload the then generated file to Google Play Store.
Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make adding any native functionality you need to your Ionic mobile app easy. We can use any of the available community made Cordova plugins in an Ionic application easily with the help of Ionic Native. Ionic Native is not required but it helps to write code better. We can integrate Cordova plugins without using Ionic Native as well, but Ionic Native adds types to these plugins using wrapper classes and thus lets us use intellisense and code suggestions.
This prevents is from running into errors and write the code quicker. For beginners, it is a very big help. More and more plugins are being added to the Ionic Native directory.
routerLink is a directive provided by the RouterModule in Angular (and now in Ionic as well). It allows us to link to routes from within the templates just like the href attribute in HTML. Once, the routerLink is defined on any HTML or Angular component, the component can then be click to navigate to the corresponding path in the project.
If the link is static, you can use the directive as follows
<a routerLink="/user/bob">link to user component</a>
routerLink is one of the core directives used for navigation in Ionic 4 apps.
HttpClientModule is a module provided by the @angular/common/http package that has the classes and services that we can use to implement a network interface in our Ionic 4 and Angular Apps.
Once the module has been imported and added to the main project module, the HttpClient class can be used to make network requests to any web-services or APIs.
The Platform service can be used to get information about the current device running the app. We can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). We can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information we can completely customize our app to fit any device and even perform differential actions in the app based on the platform.
All apps that need some sort of user interaction either collection information from the user or display information to the user. An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a title, subTitle and message.
An AlertController is service in Ionic that is used to display an Alert to the user. This alert is automatically styled according to the platform the app is running on.
We can pass all of the alert's options in the first argument of the create method: create(opts). Otherwise the alert's instance has methods to add options, such as setTitle() or addButton().
Events is a publish-subscribe style event system for sending and responding to application-level events across your app. We can publish an event from anywhere in our app in response to certain action done by the user or anything like that and all the subscribers of that event will be notified accordingly. This is really handy if we need to update content on one page in response to an action on another page within the app in real-time.
LoadingController service can be used to display a Loading component to the user for as long as the app is busy doing something in the background. A Loading component can display an animated spinner and some text as well that tells the user about the task that the app is busy with.
The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting showBackdrop: false upon creation.
skeleton-text is a component for rendering placeholder content. The element will render a gray block at the specified width. It has been introduced in Ionic 4 and it very useful when displayed to the user while the actual content is being loaded from an API or web-service.
split-pane is a component that makes it possible to create multi-view layout. Similar to iPad apps, SplitPane allows UI elements, like Menus, to be displayed as the viewport increases.
If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again. This is especially useful when creating an app that will be served over a browser or deployed through the app store to phones and tablets.
By default, SplitPane will expand when the screen is larger than 768px. If you want to customize this, use the when input. The when input can accept any valid media query, as it uses matchMedia() underneath. Here is an example,
<!-- could be "xs", "sm", "md", "lg", or "xl" → <ion-split-pane when="lg"></ion-split-pane>
Ionic Native uses Cordova plugins and Cordova plugins do not work in the browser. To test these functionalities, the app needs to be tested on an emulator or a real device. On a browser, the plugins will always raise errors about Cordova not being available.
To debug, we can use Chrome Remote Debugging to look at the logs as the app runs on a device/emulator.
Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps "Native Progressive Web Apps" and they represent the next evolution beyond Hybrid apps.
Capacitor provides a consistent, web-focused set of APIs that enable an app to stay as close to web-standards as possible, while accessing rich native device features on platforms that support them. Adding native functionality is easy with a simple Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.
Capacitor is a spiritual successor to Apache Cordova and Adobe PhoneGap, with inspiration from other popular cross-platform tools like React Native and Turbolinks, but focused entirely on enabling modern web apps to run on all major platforms with ease. Capacitor has backwards-compatible support for many existing Cordova plugins.
It is functionally pretty similar to Apache Cordova (formerly known as PhoneGap) which can be viewed as a predecessor to Capacitor but differs in some important areas and technology choices.
The ionic framework is an open-source UI toolkit used for building high-performance mobile, desktop apps, and progressive Web Apps using web technologies (JavaScript, CSS, and HTML). The ionic framework is used by the world’s best-known brands like Untapped, Sworkit, Dow Jones MarketWatch, NASA. Currently, it has precise integration with Angular, but support for React and Vue are in development.
Ionic is a mobile application, used by many organizations to develop apps. There are numerous jobs opportunities available related to this across the globe.
Many apps around the globe have been built using the Ionic Framework. To name a few: MarketWatch, Pacifica, Sworkit, etc.
Are you ready to face the Ionic interview? If so, you have landed yourself at the right place. These Ionic framework interview questions will help you to get ready to face the interview.
If you are preparing for an Ionic job interview and worried about the questions, go through the following collection of frequently asked Ionic framework interview questions and answers for freshers as well as experienced professionals to crack your interview. These ionic interview questions and answers will help you to crack your Ionic interview successfully.
These are some interview questions on the Ionic framework that covers both the basic and advanced level, which have been answered by experts. Hope these Ionic interview questions will enrich your knowledge and increase your understanding of the Ionic framework. Make sure you get the benefits of this extensive list of Ionic framework interview questions and answers.
Good luck with your future endeavors with Ionic.
Submitted questions and answers are subjecct to review and editing,and may or may not be selected for posting, at the sole discretion of Knowledgehut.