Ionic Interview Questions and Answers (2022)

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

A web application makes a cross-origin request for a resource like an image or a font outside of the origin, and CORS manages these cross-origin requests. The CORS standard is necessary because it allows servers to specify who can access its assets and how the assets can be accessed.

For security reasons, the browser restricts cross-origin requests initiated within scripts. The CORS needs to be handled on the server. When responding to HTTP requests in your server app, you can add the CORS response headers to specify that the client app can access a resource or not. If the CORS is not implemented on the server, then there is a native plugin available that performs HTTP requests in the native layer, which bypasses CORS. Thus, external services can properly handle cross-origin requests.

The ionic framework provides a storage module that resides in @ionic/storage package. The storage module allows us to store key-value pairs and JSON objects in secure, reliable storage. It also has its own set of limits.

Storage has a variety of storage engines, which one is best depends on the platform you are using. When running in a native app context, the storage uses SQLite. When running on the Web or as a Progressive Web App, Storage will use IndexedDB, WebSQL, and localstorage.

The SQLite is the most stable and used a file-based database, which avoids the pitfalls of the other storage engines like IndexedDB, WebSQL, and localstorage.

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

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

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

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

• Grids act as a container for rows and columns. It takes the full width of their container, but adding the fixed attribute will specify the width per screen size.
• Rows are horizontal groups of columns, and columns are a place where we put our contents, and only columns should be immediate children of rows.
• The size attributes indicate the number of columns to use out of the default 12 per row. So, size="4" can be added to a column in order to take up 1/3 of the grid.
• If columns are without size value, it will automatically take equal widths.
• Columns have padding attributes between individual columns; however, the padding can be removed from the grid and columns by using no-padding on the grid.
• The grid contains five grid tiers, one for each responsive breakpoint. All breakpoints are extra-small, small, medium, large, and extra-large.

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

We know that every Ionic component is a web component, and these components will be lazily loaded only when they are accesses in the Ionic application. It means that the code forandwill only be loaded when they are accessed in the application.

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

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

The ion-infinite-scroll is a very useful component when we have to show a large set of data at once in the Ionic application. This component allows to load data into the app when the user scrolls a specified distance from the top or bottom of the page.

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

Pre-requisite for Ionic

The following things are required to install Ionic.

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

The ionic preparecopies all files from the www folder into the target platform's www folder.

The ionic buildperforms the task of ionic prepare as well as it builds the app's source code, which facilitates to run over the Simulator of an emulator or a device.

npm install -g cordova-check-plugins  
                                        cordova-check-plugins --update=auto  
                                        

Some of the important Ionic components are:

Ion-Alert

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

Ion-Buttons

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

Ion-Content

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

Ion-List

Lists are made up of multiple rows of items, which include text, buttons, toggles, icons, thumbnails, and many more. The list element is used to display various information such as menus, tabs, or to break the monotony of pure text files. It supports several interactions, including swiping items, dragging to reorder items within the list, and deleting items.

Ion-Input

This component is used for collecting and handling user input securely. It works the same as an HTML input element. It accepts only text type inputs such as text, password, number, email, and URL. It should always be wrapped with the ion-item element.

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

An alert is a dialog that notifies the user with important information to make a decision or provide the ability to choose a specific action or list of actions. It can be dismissed manually by the user before resuming interaction with the app. It can be thought of as a floating modal which should be used for a quick response such as password verification, small app notifications, and many more.

The alert controller is responsible for creating an alert in the Ionic application. It uses create() method to create an alert and can be customized by passing alert option in the create() method.

Since Ionic 1-3 are majorly dependent on Angular. The Compilation options that were available for Angular were available for Ionic too. I have mentioned them below.

• JIT stands for Just in Time compiler. It is a type of compilation where a compilation of the app happens in the browser at runtime.
• AOT stands for ahead of time compiler. It is a type of compilation that compiles the app at build time.
• If we just use ionic cordova build platform (android or ios) then it will be JIT if we use prod flag I, E ionic cordova build platform --prod then it will use AOT.

An app that is built with JIT is slow as compared to AOT. But compilation time required for AOT is more than JIT. So for a quick checks use JIT and for a final deployment use AOT.

The capacitor is a cross-platform app, which makes it easy to build web apps that run natively on iOS, Android, Electron, and the Web with one single code base. These apps can be called Native Progressive Web Apps and represent the next evolution beyond Hybrid apps.

It sees as a replacement of Apache Cordova and Adobe Phonegap, with inspiration from other popular cross-platform tools like React native, but focuses entirely on enabling modern web apps to run on all major web platforms. The capacitor has a number of backward-compatible support for many existing Cordova plugins.

CLI means Command Line Interface. Similar to Angular, Ionic CLI comes with a number of helpful commands that let you create a new project, add pages , components, providers , directives , pipes and so on. You need the CLI to run, emulate, debug, build and deploy your application.

The syntax to create a new ionic project using ionic cli is :

ionic start <project name> <template> for e.g. ionic start hello world blank. This would create a new project with blank screen. Optionally you can mention tabs , side menu, etc. instead of blank as starter template.

Every component in Ionic has a lifecycle. Ionic creates, renders the component, checks it when its data-bound properties change and destroys it finally. Ionic offers lifecycle hooks that provide a way to tap into these key moments and trigger an action when they occur.

Ionic 2 & 3 had these lifecycle events : ionViewDidLoad, ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, ionViewDidLeave, ionViewWillUnload, ionViewCanEnter, ionViewCanLeave.

• ionViewDidLoad : Fired only when a view is stored in memory, will not fire if view has been already cached.
• ionViewWillEnter : fired when entering a page, before it becomes active one. this event is triggered every time user enters in the view.
• ionViewDidEnter : fired when entering a page, after it becomes active page.
• ionViewWillLeave : fired when user leaves a page, before it stops being the active page.
• ionViewDidLeave : fired when user leaves a page, after it stops being the active page.
• ionViewWillUnload : fired when a view is going to be completely removed.
• ionViewCanEnter : this is a nav guard. fired before entering a view. Useful when you want to control access to pages based on access credentials.
• ionViewCanLeave : this is also a nav guard, fired before leaving a view.

Allows you to control whether user can exit the view or not Ionic 4 provides the Angular lifecycle hooks in addition to the above listed Ionic lifecycle hooks. All the angular lifecycle hooks are available.

ngOnChanges , ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy.

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

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

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

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

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

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

There are a few built-in colours that come with every Ionic project. As a beginner we will be curious to know how those colours are programmed. Below are the instructions for same.

In Ionic project navigate to project/src/theme/variables.scss folder.

Here there will be a variable named $colours which will contain the various different colours names and their equivalent hexadecimal colour codes.

One can change the colour codes for the default colours also they can add new colour names and hexadecimal code for it.

It is recommended to store the theme colour of the app here. So that you can use it throughout the app and in case if the theme needs to be changed on some occasion, then you can just change it here, the entire app gets updated

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

Home.page.ts

import { Component, Events } from '@ionic/angular';  
                                          
                                        @Component({    
                                          selector: 'app-home',    
                                          templateUrl: 'home.page.html',    
                                          styleUrls: ['home.page.scss'],    
                                        })    
                                        export class HomePage {  
                                          constructor(public events1: Events) {}  
                                          createUser(user) {  
                                           console.log('User created!')  
                                           this.events.publish('user:created', user, Date.now());  
                                          }  
                                        }  
                                        

Page2.ts

import { Component, Events } from @'ionic/angular';  
                                          
                                        @Component({  
                                          selector: 'page-page2',  
                                          templateUrl: 'page2.html'  
                                          styleUrls: ['page2.scss'],    
                                        })  
                                        export class Page2Page {  
                                          constructor(public events2: Events) {}  
                                           events.subscribe('user:created', (user, time) => {  
                                             console.log('Welcome', user, 'at', time);  
                                          });  
                                        }  
                                        

We know that Ionic apps are built using web technologies such as HTML, CSS, and JavaScript. These web technologies are rendered using Web Views, which are full screen and full-powered web browser.

The latest web view provides many built-in HTML5 APIs for hardware functionality, which are a camera, Bluetooth, GPS, sensors, and speakers. Sometimes it also needs to access platform-specific APIs. In the Ionic framework, the hardware APIs can be accessed through a bridge layer, typically by using native plugins that expose JavaScript APIs.

Ionic: Ionic framework is a set of CSS, JVscript library, built on Cordova and AngularJS

PhoneGap: PhoneGap is a framework developed by Adobe Systems. It is used for developing mobile applications and can be used by anyone with the knowledge of CSS, HTML, JScript. PhoneGap is a propitiatory version of Apache Cordova and gives extra features apart from the existing Cordova.

Cordova: Cordova is a JavaScript framework which builds apps, which can access the device hardware. Cordova cannot build UI interactions of mobile apps because it uses HTML5, CSS6, Sencha to build UI. However, it supports other web technologies used to develop mobile apps. Cordova is also known as Apache Cordova.

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

ionic start --list
                                        

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

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

Ionic application is developed using AngularJS. AngularJS has a collection of test libraries and frameworks such as Karma, Jasmine test runner, etc. Ionic uses these frameworks for testing of an application. There are four ways to test Ionic App: in a desktop WebKit browser, in the iOS or Android simulator, in a mobile browser on your phone, or as a native app on the phone. Desktop browser testing:

Testing your app in a browser is as simple as running the server command.

    $ ionic serve
                                        

This will start a live-reload server for your project. When changes are made to any HTML, CSS, or JavaScript files, the browser will automatically reload when the files are saved.

Simulator Testing:

We can also test in the simulator using cordova commands. For eg: to test in IOS simulator, run:

$ ionic cordova build ios
                                        $ ionic cordova emulate ios
                                        

Whereas in Android testing, If you want to get advanced, you can also open up the project file for a specific platform by opening the required Xcode or Android Eclipse project in platforms inside the root of your project. Then, you can build and test the platform-specific IDE.

Mobile browser testing:

We can also test the app directly in a mobile browser. For OS X users, Safari on OS X can debug websites and simulator applications. First, we have to enable the remote web inspector on both the device and Safari on the desktop. To do this with iOS 7 and OS X Mavericks, enable Web Inspector option in the iOS Settings -> Safari -> Advanced section, and also enable the Developer Menu in the Advanced section of Safari OS X settings.

Android apps supporting Android 4.4 or above can use Chrome for remote debugging.

If you are using the local server method from the Desktop testing section and you are on the same network as a desktop computer, you can connect to the IP address of the desktop computer to test. So, if our desktop is running a test server at 192.168.1.123:8000, we can just load that address into our mobile Chrome or Safari to test it.

One problem testing in a mobile browser is that it’s probably the furthest of the three options from the actual app experience. This is largely because the browser app is for browsing websites, so it often adds functionality that conflicts with your app. For example, Chrome and Safari both listen for drag events on the sides of the app which allows switching between open tabs. They have issues with the URL bars getting in the way, and some scrolling behavior is not the same as it is in the web view running in Cordova. It is fine for small tests, but definitely not recommended for more complex apps.

Testing as a native app:

Since we are building a native app, we can test it. There are several ways to do this. If you are building for iOS devices, you’ll need to sign up for an Apple Developer account to test as a native app on an iPhone or iPad. Once you have an account and you need to have set up Xcode with your certificates to enable device testing, you’ll want to open the Xcode project from platforms/ios/ and do your testing from Xcode. Testing on Android is much easier and faster. To test on a device, simply plug it in and run.

$ ionic cordova run android
                                        

If this doesn’t work, make sure you have USB debugging enabled on your android device.

You can convert base64 image to blob image in ionic by first prepend content type data, for example you can use a JPEG image by:

const base64Response = await fetch(data:image/jpeg;base64,${base64Data});

And then you can convert the given responce to a blob by:

const blob = await base64Response.blob();

Now, you can upload it to a server, display it on the screen, etc.

For most modern JS libraries like React, Vue, Angular etc. They need a centralised place to manage the different plugins and packages that the project uses. Package.json is mainly used for that reason.

Package.json

• It records the minimum version of the package that the project needs. If we update packages to the latest version, that will not have any effect on - package.jsonIt records the exact version of each installed package which allows you to re-install them. Future installs will be able to build an identical dependency.
• The package.json is used for more than dependencies - like defining project properties, description, author & license information, scripts, etc.

Package-lock.json

• The package-lock.json is all about the packages. And locking them to a particular version.
• We cannot build an Ionic project without this file.
• We can build an Ionic Project without this.

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.

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:

• Isolated DOM
• Isolated CSS
• Simplified CSS Rules

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

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.

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.

Ionic does not provide a camera API. However, since Ionic uses plugins architecture, and it is based on Cordova, we can use Cordova plugins in our application. The ionic team supplies a set of Cordova extensions with Angular wrappers which can be found at ngCordova. To be able to use Cordova plugins, we need to install the plugin using Ionic command install. In some cases, we additionally need to add the plugin’s Angular module to your Angular application. To use a mobile phone’s camera app in the Ionic application, we can call the camera API by using cordova-plugin-camera that is hosted on GitHub. Now, this plugin defines a navigator.camera object which provides API for taking pictures and for choosing images from the system’s image library.

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.

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

In the Ionic framework, observables are not specific to Ionic or Angular and they are provided with RxjS library. Observables are like a commitment but a lot of things can be worked out from it. It can deal with multiple values at a time rather than just resolving one value at that time. It can also be used to manipulate the data which is associated with it. Observables cannot be executed until and unless they are subscribed to. Various operations can be applied to observables for modification and returning to a new one. We can also create our own observable. The observable pattern is combined into one with the help of the subject which is preferred for simple implementations.

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

For every mobile app, it is very essentials to transfer its state between the components or pages. Ionic has few ways of doing it, which is listed below.

Using NavigationController: In Ionic 2 and 3 we can use the Navigation controller to pass data between the pages.

Ex: If we have to travel between Page A to Page B, below code can be used to navigate and transfer the data.

this.navCtrl.push(B, {name: ‘test’}) Where navCtrl is an object of NavigationController.

To get the value of name on Page B below code is used.

this.navParams.get(“name”) where navParams is an object of NavParams.

Using services: You can use a common service to transfer data between multiple pages.

Say you create a service named base and it has a variable name and email. Page A can set the value of the variable by using this.base.email Page B can access this variable by this.base.email whatever the value set by Page A can be used by Page B.

Complete code snippet:

1. Base service
                                        
                                        @Injectable()
                                        export class BaseProvider {
                                        email:any;
                                        }
                                        
                                        2. Page A
                                        
                                        import { BaseProvider } from "YOUR_PATH";
                                        @IonicPage()
                                        @Component({
                                          selector: 'page-A',
                                          templateUrl: 'a.html',
                                        })
                                        export class a {
                                            constructor(private base: BaseProvider){
                                                this.base.email = "[email protected]"
                                            }
                                        }
                                        
                                        3. Page B
                                        
                                        import { BaseProvider } from "YOUR_PATH";
                                        @IonicPage()
                                        @Component({
                                          selector: 'page-A',
                                          templateUrl: 'a.html',
                                        })
                                        export class a {
                                            constructor(private base: BaseProvider){
                                                console.log(this.base.email)  //whatever set on page A can be accessed here
                                            }
                                        }
                                        

One of the ways to integrate google login in an ionic app is by using Cordova and Ionic Native plugins.

Run following two commands to install the plugins

ionic cordova plugin add cordova-plugin-googleplus --variable 
                                        REVERSED_CLIENT_ID=yourreversedclientid 
                                        npm install --save @ionic-native/google-plus 
                                        Add google-plus plugin to your app.module.ts file as below 
                                        
                                        import { GooglePlus } from '@ionic-native/google-plus'; 
                                        Add GooglePlus in providers list in app.module.ts. 
                                        Import GooglePlus plugin and make it available in your component's constructor 
                                        import { GooglePlus } from '@ionic-native/google-plus'; 
                                        constructor( private googlePlus: GooglePlus) { 
                                        } Sample Code 
                                        this.googlePlus.login({}) 
                                        .then(res => console.log(res)) 
                                        .catch(err => console.error(err)); 
                                        

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

You can add a Custom initial splash screen in Ionic by following the given steps:

• Generate a splash screen that can transition seamlessly to your fake splash screen (e.g. just a solid color)
• Set the splash screen so that it does not auto-hide
• Once the application has loaded, launch your fake splash screen page that contains the animation
• Hide the real splash screen
• After a set amount of time, dismiss the fake splash screen

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

One way to resolve this issue is to use crosswalk along with Ionic framework. Crosswalk allows you to package a modern Chrome webview along with Ionic application, so an application does not have to rely on native Android browser. The end results are much better performances and modern web API across all Android versions.

Ionic does not provide a camera API out of the box. However, since Ionic uses plugins architecture, and because it is based on Cordova, we can use Cordova plugins in our application. Ionic team provides a set of Cordova extensions with Angular wrappers, and they can be found at ngCordova.

To use Cordova plugins, we need to install the plugin using Ionic command install. In some cases, we will additionally need to add the plugin’s Angular module to your Angular application too.

To use a mobile phone’s camera in the Ionic application, we can call the camera API by using cordova-plugin-camera that is hosted on GitHub. This plugin defines a global navigator.camera object, which provides an API for taking pictures and for choosing images from the system’s image library.

To create a button, we can use ion-button component. Ion-button comes with few attributes like fill , size, shape , color.

• Fill attribute can have one of these three options - solid, outline or clear. Choose solid when you want to fill the background color, choose outline when you want only a thin border around the button without background color and choose clear when you don’t want any background color or border. Since the requirement is to have an outline, we shall use fill=”outline” .
• Size attribute specified size of the button. Basically , you specify size when you want the button to be small, large or default.
• Shape attribute is used when you want the button to have rounded corners. By default , buttons are rectangular in shape but you can have rounded corners by adding shape=”round” attribute to the markup.
• Color attribute can be used to apply one of the preset themes available with Ionic. Ionic has nine default colors that can be used to change the color of UI components. Each color is a collection of multiple properties, including a shade and tint, used throughout Ionic. The options for color attribute are primary, secondary, tertiary , success, warning, danger , light , medium and dark.
• So, to create a button with rounded corners and outline without any background color, the markup would be as below :

<ion-button color=”primary” fill=”outline” shape=”round”> Submit </ion-button>

Observable and promises are used to execute asynchronous tasks in Ionic. For Ex: Making network calls, Checking the internet connection etc.

Observable

• Computation does not start until subscription so you can run then only when you need the result
• Provide multiple values over time
• Subscribe method is used for error handling which makes centralized and predictable error handling
• Provides chaining and subscription to handle complex applications

Promise

• Execute immediately after creation
• Provide only one
• Pushes errors to the child promises
• Uses only .then() clause

Example of Promise and Observable
                                        i. Promise
                                        
                                        var promise = new promise((resolve) => {
                                            setTimeout(() => {
                                                resolve(42)
                                            }, 500)
                                            console.log("Promise started")
                                        })
                                        promise.then(data => console.log("Output", data))
                                        
                                        ii. Observable
                                        
                                        var observable = Rx.Observable.create((observer) => {
                                            setTimeout(() => {
                                                observer.onNext(42)
                                            },200)
                                            console.log("Observer started")
                                        })
                                        observable.forEach(x => console.log("Output is x))
                                        

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.

src/app/tabs/ folder will have a tabs.router.module.ts file. Similar to Angular app routing module , routes can be configured for tabs in this file.

Routes can be configured for tabs as below :

const routes: Routes = [ 
                                        { 
                                        path: 'tabs', 
                                        component: TabsPage, 
                                        children: [ 
                                        { 
                                        path: 'tab1', 
                                        children: [ 
                                        { 
                                        path: '', 
                                        loadChildren: '../tab1/tab1.module#Tab1PageModule' 
                                        } 
                                        ] 
                                        }, { 
                                        path: 'tab2', 
                                        children: [ 
                                        { 
                                        path: '', 
                                        loadChildren: '../tab2/tab1.module#Tab2PageModule' 
                                        } 
                                        ] 
                                        }, { 
                                        path: 'tab3', 
                                        children: [ 
                                        { 
                                        path: '', 
                                        loadChildren: '../tab3/tab3.module#Tab3PageModule' 
                                        } 
                                        ] 
                                        }, { 
                                        path: '', 
                                        redirectTo: '/tabs/tab1', 
                                        pathMatch: 'full' 
                                        } 
                                        ] 
                                        } 
                                        ]; 
                                        

Generate a service first using ionic generate service command. Import HttpClient from @angular/common/http library. Then add HttpClient to constructor so it can be used in the service. A typical get and post request can be written as follows :

get(endpoint: string, params?: any, options?: RequestOptions) { 
                                        if (!options) { 
                                        options = new RequestOptions(); 
                                        } if (params) { 
                                        let p = new URLSearchParams(); 
                                        for (let k in params) { 
                                        p.set(k, params[k]); 
                                        } options.search = !options.search && p || options.search; 
                                        } return this.http.get(this.url + '/' + endpoint, options); 
                                        } post(endpoint: string, body: any, options?: RequestOptions) { 
                                        options = new RequestOptions(); 
                                        options.headers = this.createHeaders(); 
                                        return this.http.post(this.url + '/' + endpoint, body, options); 
                                        } 
                                        

One of the important areas which would majorly affect the performance of the app is network calls. It should be tuned to the highest accuracy to make the app perform better.

• If two different components trying to make an HTTP call to the same URL means, it is better to make a single call and send data to both the components, rather making two different HTTP calls. The provided request is done in a gap of few seconds.
• Best way to achieve this is using a root component. All the components making an HTTP call should go with a common root component. Which keeps track of the URLs that have been requested a few seconds back, if same is requested again, then it can add a minimum delay and once response comes, it can send it to both the components.

Use Html5 maxlength property to add maxLength on ion-input.

Example

<ion-content padding>
                                          <ion-list>
                                            <ion-item>
                                              <ion-label color="primary" stacked>Stacked Label</ion-label>
                                              <ion-input type="text" maxlength="4" placeholder="Password Input"></ion-input>
                                            </ion-item>
                                          </ion-list>
                                        </ion-content>
                                        

Headers are fixed regions at the top of the screen which might consist of title label and left or right buttons to it providing navigation or to provide various actions. The ionic header bar is implemented to build header on the application. The bar class is the main class with bar-header used for creating header bar in-app.

Footer is a root component of a page located at the bottom of the page. Footer can be a wrapper for ion-toolbar to make sure the content area is sized properly. Ionic footer bar is implemented to build footer on the application. The bar-footer class is used for creating a footer bar in the app.

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

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

Caching can be disabled per view by using cache: false in UI-router’s state config, like in the following example:

$stateProvider.state('myState', {
                                           cache: false,
                                           url : '/myUrl',
                                           templateUrl : 'my-template.html'
                                        })
                                        

Caching can be also disabled globally, by setting maxCache to 0:

$ionicConfigProvider.views.maxCache(0);

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.

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.

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.

Tabular data can be shown in a responsive manner using ion-grid UI component.

Below example displays 6 column layout for extra large screens (xl, min-width 1200px), 4 column layout for large screens (lg, min-width: 992 px), 3 column layout for medium size screens(md, min-width:768px) , 2 column layout for small screens(sm, min-width:576px) and single column layout for extra small screens (xs, min-width:0).

<ion-grid> 
                                        <ion-row> 
                                        <ion-col size=12 size-xl=2 size-lg=3 size-md=4 size-sm=6 size-xs=12 *ngFor="let item of 
                                        ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; let i = index"> 
                                        <ion-badge slot="start"> {{i}} </ion-badge> 
                                        <ion-label> {{item}} </ion-label> 
                                        </ion-col> 
                                        </ion-row> 
                                        </ion-grid> 
                                        

Offline mode means users can still use the app when network connection is lost. This can be done by caching API data so that it can be used later and a network service to detect when your network is lost or available.

To make your app work in offline mode, you need to create an offline manager service which stores requests made during that time so that we can send the requests when network is available.

For this , ionic has the ionic/storage and ionic-native/network modules. The Network module provides onConnect() and onDisconnect() events which can be used to track network changes.

Ionic framework is a framework for developing mobile applications using HTML5, CSS and Javascript that UI and it looks like native UI components. It targets multiple platforms like Android, iOS, Windows with single code base so web application developers can create their own mobile apps. Ionic is built on top of an Angular framework. Ionic comes inbuilt electron support where an electron is a new open technology for building traditional desktop apps using web technologies. Ionic and Angular framework is completely built from scratch offering better.

$ionicBackdrop performs shows and hides backdrop over UI. Appears behind popups, loading, and other overlays. Usually multiple UI components require a backdrop but only one backdrop is needed in DOM. Each component which requires backdrop to be shown calls $ionicVackdrop.retain() when it wants to backdrop then $ionicBackdrop.release() when it is done with the backdrop. Method $ionicBackdrop.retain() and $ionicBackdrop.release() is used for backdrop. $ionicBackdrop.retain() is used to apply overlay over the content. $ionicBackdrop.release() is used to remove Ionic Backdrop from content. Each time when $ionicBackdrop.retain() is called $ionicBackdrop.release() method is called.

Use Javascript window.open(url, '_blank', 'location=no'); to open a download link while inside an ionic inAppBrowser

Async and await are used to execute asynchronous code blocks. The main reason they are used is to increase the readability of the code.

a. Say there are 2 network calls that need to be done one after the other, we can achieve it using async and await with below code snippet.

i.

async addWithAsync() {
                                            const result1 = <number>await this.networkCallOne(20);
                                            const result2 = <number>await this.networkCallTwo(30);
                                            this.additionAsyncResult = result1 + result2;
                                            console.log(`async result: ${this.additionAsyncResult}`);
                                          }
                                        

ii. In the above code, until first line executes control will not come to second line. If we try to achieve the same promises or observable, we need to write code, as mentioned below.

iii.

addWithPromise() {
                                        
                                          this.networkCallOne(20).then(data1 => {
                                              let result1 = <number>data1;
                                              this.networkCallTwo(30).then(data2 => {
                                                let result2 = <number>data2;
                                                this.additionPromiseResult = result1 + result2;
                                                console.log(`promise result: ${this.additionPromiseResult}`);
                                              });
                                            });
                                        

iv. With above code pattern when hierarchy increases, the readability of the code decreases.

Add no-bounce property inelement to disable content scrolling in IONIC.

Example

<ion-content no-bounce></ion-content>

Ionic 4 being based on Angular 6 / 7 , the application when created comes with a unit testing framework named Jasmine. It is automatically set up up to unit test the application. Unit tests are contained in .spec files which are created for every component, page, service , pipe, guard etc. The spec file contains a single describe call that defines the overall test.

Each describe call can contain setup and teardown code through before Each and after Each calls. Finally, it calls define individual test cases.

Below snippet shows a sample spec.ts file for a page.

describe('Tab1Page', () => { 
                                        let component: Tab1Page; 
                                        let fixture: ComponentFixture<Tab1Page>; 
                                        beforeEach(async(() => { 
                                        TestBed.configureTestingModule({ 
                                        declarations: [Tab1Page], 
                                        schemas: [CUSTOM_ELEMENTS_SCHEMA], 
                                        }).compileComponents(); 
                                        })); 
                                        beforeEach(() => { 
                                        fixture = TestBed.createComponent(Tab1Page); 
                                        component = fixture.componentInstance; 
                                        fixture.detectChanges(); 
                                        }); 
                                        it('should create', () => { 
                                        expect(component).toBeTruthy(); 
                                        }); 
                                        }); 
                                        

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

• MVC Stands For Model-View-Controller. It Is A Software Design Pattern Which Was Introduced In 1970s. Also, MVC Pattern Forces A Separation Of Concerns, It Means Domain Model And Controller Logic Are Decoupled From User Interface (View). As A Result Maintenance And Testing Of The Application Become Simpler And Easier.

• MVP Stands For Model-View-Presenter.This Pattern Is Similar To MVC Pattern In Which Controller Has Been Replaced By The Presenter. This Design Pattern Splits An Application Into Three Main Aspects: Model, View And Presenter.The Presenter Is Responsible For Handling All UI Events On Behalf Of The View.

• MVVM Stands For Model-View-View Model. This Pattern Supports Two-Way Data Binding Between View And View Model. This Enables Automatic Propagation Of Changes, Within The State Of View Model To The View. Typically, The View Model Uses The Observer Pattern To Notify Changes In The View Model To Model.

If you want to get advanced mode, you can open up the project file for a specific platform by opening the required XCode or Android Eclipse project in platforms/PLATFORM inside the root of your project. Then, you can build and test from the platform-specific IDE. Note: if you go this route a suggestion to work inside of the root www folder, and when you've made changes to this folder, run the command: $ cordova prepare ios which updates the iOS-specific project with the code from the www folder. Note: this will overwrite any changes made to the platforms/ios/www and other platform-specific folders.

So, to summarize this part - if you're using XCode to test and run your code after you change some part of the code you just have to run ionic prepare to update the iOS project which again you can continue to use in XCode. ionic buildcommand actually prepares the final (for example in Android it's the .apk file) file which then could be copied to your device and test by running it manually on the device (or by using the ionic emulate command to test it on the emulator).

Normally, the simplest way to import a component in a page or another component is by importing it in the module file. But we cannot import a custom component in two separate modules as it will raise an error alert. So, in order to reuse a custom component like a header or footer component, you can import the custom component in a separate module and then import the module in the target page’s module file.

Here’s an example.

Create the component as below ng g component components/site-header. Now create a file custom-components.module.ts in src/app/

Add this code -

import { NgModule } from '@angular/core'; 
                                        import { SiteHeaderComponent } from './components/site-header/site-header.component'; 
                                        @NgModule({ 
                                        declarations: [SiteHeaderComponent], 
                                        exports: [SiteHeaderComponent] 
                                        }) export class CustomComponentsModule{} 
                                        Now import this module in the module file of the page where you want to import 
                                        the header component - 
                                        import { NgModule } from '@angular/core'; 
                                        import { CommonModule } from '@angular/common'; 
                                        import { FormsModule } from '@angular/forms'; 
                                        import { Routes, RouterModule } from '@angular/router'; 
                                        import { IonicModule } from '@ionic/angular'; 
                                        import { CategoryPage } from './category.page'; 
                                        import { CustomComponentsModule } from './../custom-components.module'; 
                                        const routes: Routes = [ 
                                        { 
                                        path: '', 
                                        component: CategoryPage 
                                        } 
                                        ]; @NgModule({ 
                                        imports: [ 
                                        CommonModule, 
                                        FormsModule, 
                                        IonicModule, 
                                        CustomComponentsModule, 
                                        RouterModule.forChild(routes) 
                                        ], declarations: [CategoryPage] 
                                        }) export class CategoryPageModule {} 
                                        Load the component by adding it’s selector in the page’s view . 
                                        <app-site-header></app-site-header> 
                                        <ion-content padding> 
                                        <H3> Category Page </H3> 
                                        </ion-content>