1.What steps would you have to take to use Ionic Storage within your application to save user’s current email in local storage?

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

2.What is Shadow DOM in Ionic 4?

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

3.What component or web-component in Ionic 4 is used to add a back button in the navigation bar? Share an example of how you would use it.

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

4.What is Virtual Scroll component in Ionic?

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] 

5.In Ionic 3, lazy loading can be implemented using @IonicPage decorator, how would you achieve lazy loading Ionic 4 since there is no @IonicPage decorator anymore?

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.

6.How would navigate from One page/component to another page/component in Ionic 4?

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.

7.How would you integrate a payment gateway, for example PayUMoney or PayTM, in an Ionic app?

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

8.What are ion-tabs and ion-tab used for?

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]

9.Explain async and await.

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.

10.What are Observables with respect to modern JavaScript?

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.

11.Explain how the ion-infinite-scroll component works in Ionic 4?

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.

12.Explain how would send parameters from one page to another when navigating in Ionic 4?

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.

13.What is View Encapsulation in Ionic 4/Angular?

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.

14.What is the difference between ngOnInit and ionViewDidLoad lifecycle hooks in Angular and Ionic respectively?

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.

15.What is a Progressive Web App?

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:

  • Progressive – Work for every user, regardless of browser choice, because they are built with progressive enhancement as a core tenet.
  • Responsive – Fit any form factor, desktop, mobile, tablet, or whatever is next.
  • Connectivity independent – Enhanced with service workers to work offline or on low quality networks.
  • App-like – Use the app-shell model to provide app-style navigation and interactions.
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and ensure content has not been tampered with.
  • Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable – Make re-engagement easy through features like push notifications.
  • Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily share via URL and not require complex installation.

 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.

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

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.

17.How would you add a custom icon to an Ionic app?

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.

18.Explain the steps that need to be followed to build an Ionic app for Android.

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.

19.What is Ionic Native?

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.

20.Explain the steps to integrate an Ionic Native Plugin into an Ionic App.

  • First of all, we need to install the Cordova plugin and the Ionic Native wrapper for the plugin using the commands specified in the Ionic Native Plugin’s page.
  • Next, we need to import the plugin into the project’s main module file (app.module.ts in most cases) and pass it to the providers array.
  • Finally, we need to import the plugin and its supporting classes in the component/page that we want to use it in and inject it into the component by passing it into the constructor.
  • Now, we can use the plugins methods and properties throughout the component/page and implement the functionality.

21.What is the routerLink directive?

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.

22.What Angular Module would you use to make network calls to an external API?

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.

23.How do you get device’s information in Ionic?

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.

24.When would you use an AlertController in Ionic?

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

25.Explain Events in Ionic?

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.

26.What would you use to display a loading screen to the user while the app is doing something in the background?

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.

27.What is skeleton-text?

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.

28.What is the purpose of the split-pane component?

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>

29.How would you debug your code if an Ionic Native plugin is not working in the browser?

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.

30.What is capacitor?

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.