The Ionic framework uses HTML, CSS, and JavaScript components for developing mobile and web applications. With a single codebase, developers can create cross-platform, high-quality mobile apps by combining UI components and tools. Ionic developers are in high demand in the mobile development industry. To crack your next Ionic interview, prepare with these top Ionic framework interview questions compiled by experts. 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 how to make Ionic apps work in offline mode. These questions will be equally beneficial for beginners, intermediate and expert developers. With Ionic Interview Questions, you can be confident that you will be well-prepared for your next interview. So, if you are looking to advance your career in mobile development, this guide is the perfect resource for you.
Ionic is a mobile app development framework used to build hybrid apps. Hybrid apps are basically web apps running in a browser within a wrapper that has access to the native platform layer. Ionic framework is an HTML5 framework. It needs a native wrapper like Cordova or PhoneGap in order to run as a native app. Ionic framework lets you maintain one codebase and create builds for both Android and iOS platforms.
NodeJS , npm are required in order to install Ionic. You need NodeJS 6.0.0+ or a higher version in order to install ionic.
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.
Ionic 4 app has a structure similar to an angular application. e2e , node_modules, src folders will be present in root directory along with individual files like angular.json, ionic.config.json, package-lock.json, package.json, tsconfig.json, tslint.json . e2e/ folder has files for running end to end integration tests, node_modules contains all the dependencies. src/app/ folder contains most of the app code that you will be writing. App folder essentially has app.module.ts, app.component.ts, app.component.html, app.component.spec.ts and app-routing.module.ts. any services, components, pages created can be stored in their respective folders. assets/ folder can be used to store images and other static content.
As its name suggests, angular.json hosts all of the angular settings like project name, root path for app folder, source root, paths for index file, main.ts, polyfills, assets folder path, css stylesheet paths, script paths, build settings etc. ionic.config.json can be used to set proxy settings for API to avoid CORS errors during development. package.json contains a list of dependencies and serve, build, test and e2e commands.
This, along with other Ionic basic interview questions for freshers, is a regular feature in application developer interviews, be ready to tackle it with the approach mentioned above.
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.
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.
Ionic V4 offers significant changes in performance, compatibility with multiple frameworks and many other improvements compared to previous versions.
Ionic V4 was completely rewritten to use WebAPIs and each component is packaged as a Web Component. Web Component defines as a set of Web APIs that allow you to create HTML tags that are reusable in nature. With Web Components, we can create almost anything that can be worked with HTML, CSS, and Javascript. We can also create a portable component that can be reused.
Since it's inception Ionic Framework was built using Angular but Ionic v4 is completely independent of the base framework. Since the components of the Ionic Framework such as ion-button, are now encapsulated as Web Components. Web components work with any framework, in fact, it can be done without any framework.
In Ionic 4 there are great changes in the navigation and the Router by use of Angular Router. Ionic 3 used navigation based on a simple stack where the new pages were placed on top of the stack doing push and when we wanted to navigate backward a pop of the last page is created. Traditional websites use a linear history which means that the user navigates to a page and can press the Back button to navigate back. In Ionic Framework, applications can take this a step further by allowing parallel navigation for its user. Which means that now it is possible to have multiple navigation batteries and exchange them at any time. Also to mention NavController and ion-nav in Ionic4 have become obsolete. It can still be used but only if the application does not use Lazy Loading. Instead of NavController and ion-nav, Ionic4 uses @angular/router.
Ionic 4
Ionic 3
Life cycles of navigation (LifeCycles):
The lifecycles that were used in Ionic 3 as ionWillLoad will no longer be used in Ionic 4. It uses Angular life cycles such as ngOnInit and ngAfterViewInit.
routerLink:
In Ionic 3 the event (click) is used to navigate between pages from the HTML. In Ionic 4 we will use the routerLink , as it is used in the Angular applications.
Modules:
It is not necessary to import the pages and services in the app.module.ts file. For each page there will be a module of that page, for eg: to use Reactive Forms on any page, we only import ReactiveFormsModule on the page or pages that will use it.
Pros:
Cons:
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.
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.
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.
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.
Ionic Applications provide amazing stability to iOS and Android devices. It provides high performance, low maintenance, less storage space to run new Ionic Apps, etc. But it’s noticed Ionic Application doesn’t perform smoothly on older Android devices. Any application created through the Ionic framework has been reported as non-working in status in older Android devices. Any Ionic applications running below Android devices v5 has multiple issues like low performance/non-performance, high maintenance, affecting other applications, etc. To run applications on older android devices a crosswalk plugin needs to be created externally which will help Ionic application to perform better on older android devices.
Ionic is an open-source SDK for developing hybrid mobile app developed from three minds of Max Lynch, Ben Sperry and Adam Bradley in 2013. The original version was first launched in 2013 and built on top of AngularJS and Apache Cordova. The latest version was re-built as a set of Web Components, allowing users to choose any UI framework like Angular, React or Vue.js. It also permits the use of Ionic components with a non-UI framework. The main factor of Ionic is providing tools and services for developing hybrid mobile, desktop and Web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. Mobile apps can be built with these Web technologies and allowed through native app stores to be installed on devices by utilizing Cordova or Capacitor.
Many popular apps have been built with the Ionic Framework. Following are some of the few popular Apps:
The easiest method to store key or values and JSON objects are called as storage in the Ionic framework. In these various storages, engines are used. While in case of a web application, the storage will tend to use IndexedDB, WebSQL, and local storage. Various storages are available in ionic framework. Some of them are as follows:
AngularJS and Ionic create an excellent combination in the field of application development. All mobile application play stores are built using this combination. Ionic provides dozens of components with diverse functionalities. The JS portion of hybrid mobile application development is possible to create with the help of AngularJS and Ionic itself is developed using Angular 1.0. Similarly, Ionic 2 works in the combination of Angular 2.0.
Ionic web standard recommends that which Ionic application will fit into your front-end stack from tablet to mobile to desktop as Ionic is one phase with more than twelve supportive extensible choices as well as parts. In a simple term, Ionic is rather rapidly making a group of AngularJS stimulated libraries that makes building mobile applications with Angular limitlessly simple yet quick. I any, either way, you can’t neglect Ionic.
Ionic has its own library of optimized JS, HTML and CSS tools as an Ionic platform is developed on AngularJS along with Sass. Tedious coding and developing processes have been discarded through Ionic. Push a single code, and your web application will be able to perform over different platforms. Any application built using a combination of these two can be accessed through Play Store. Creating a customized, interactive and user-friendly application has now become so simple and easy because Angular is advancing Ionic platform.
Ionic is the most comprehensive open-source SDK available for developing hybrid applications. Till the date, 4 Million programmers are using the Ionic framework and there are about 2 million+ application built with Ionic. Almost all the hybrid developers complain regarding iterative efforts required to make splash icons and screens, but Ionic makes this task comparatively easier. Ionic streamlines the development task for developers that is all due to the power of AngularJS.
Very few hybrid applications are known for their performance; however, Ionic has optimized UI components with Crosswalk in the CLI to ensure the smooth performance across various platforms. Fortunately, mobile application developers can have faith to build complex applications using a hybrid mobile application development platform.
There are varied numbers of benefits using AngularJS in a combination of ionic. One of the most significant and potential benefits of using Ionic is to support web developers community to build mobile application effortlessly.
This is a common yet one of the most important Ionic framework interview questions and answers for experienced professionals, don't miss this one.
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.
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.
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.
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.
Debugging is one of the crucial parts of any development. W.r.t to Ionic We can debug Android and iOS apps on Chrome or Safari Browser.
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 <plugin name>. 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.
Expect to come across this, one of the most important Ionic interview questions and answers for experienced professionals in app development, in your next interviews.
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 Native is a TypeScript wrapper for Cordova or PhoneGap plugins which provides adding any native functionality to the Ionic mobile app. We can implement any of the Cordova plugins community in an Ionic application easily with the help of Ionic Native. One of the functionalities of an Ionic native is to write code better. We can integrate Cordova plugins without Ionic Native as well but Ionic Native add types to these Cordova plugins using wrapper classes and allow us to use intellisense and code suggestions. This prevents from running into errors and write codes quicker and better. Plugins are added frequently to the Ionic Native directory.
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).
Ionic pages are usually converted into an Angular component as we are aware Ionic frame is built on top of Angular. Just like Angular frameworks has its lifecycle hooks which we follow during the development of Web Application. Also, lifecycle events for ionic framework help in capturing and performing some specific task.
As we have discussed important lifecycle events of ionic other than this there are some more lifecycle events which would prevent unauthorized access of users.
In Ionic 4 the above mention two events can be replaced with Routing Guards.
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.
A must-know for anyone looking for top Ionic interview questions, this is one of the frequently asked conceptual questions on the topic.
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.
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.
Hybrid Application is one that both native and Web Applications. Native Applications are developed for a specific platform and installed on a computing device. Web Applications are developed for multiple platforms and not installed locally but made available through the internet. Hybrid apps are usually mentioned in the context of mobile computing. Hybrid mobile apps are developed with a combination of web technologies like HTML, CSS, and Javascript. The key difference is that hybrid apps are hosted inside a native application that uses mobile platform’s web view. Right now most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of Javascript APIs to access device capabilities through plugins which are built with native code.
$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.
Ionic uses Cordova and Capacitor plugins to gain access to host operating systems features such as Camera, GPS, Flashlight, etc. Users can build their apps, and they can then be customized for Android, iOS, Windows, Desktop (with Electron_(software_framework), or modern browsers. Ionic allows app building and deployment by wrapping around the build tool like Cordova or Capacitor with a simplified 'ionic' command-line tool.
The ionic framework includes mobile components, typography, interactive paradigms, and an extensible base theme. Other than the SDK, the Ionic framework also provides services that developers can use to enable features such as code deploys, automated builds. The ionic framework also provides its own Integrated_development_environment known as Ionic Studio.
Don't be surprised if this question pops up as one of the top interview questions on Ionic framework in your next interview.
Ionic is an open-source SDK for developing hybrid mobile app developed from three minds of Max Lynch, Ben Sperry and Adam Bradley in 2013. The original version was first launched in 2013 and built on top of AngularJS and Apache Cordova. The latest version was re-built as a set of Web Components, allowing users to choose any UI framework like Angular, React or Vue.js. It also permits the use of Ionic components with non UI framework. The main factor of Ionic is providing tools and services for developing hybrid mobile, desktop and Web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. Mobile apps can be built with these Web technologies and allowed through native app stores to be installed on devices by utilizing Cordova or Capacitor.
Ionic provides platform classes: when the application is loaded, Ionic adds CSS classes to the <body> tag. For example, on iOS devices, Ionic adds platform-ios class to <body> tag. Ionic also adds OS version classes such as platform-ios8 (for iOS 8) and platform-android4_4 (for Android 4.4).
Ionic is by far one of the most popular and best frameworks available for developing hybrid apps. The new features basically revolve around performance, build time improvements, multi framework compatibility, new documentation. The newer update provides a tool through which it can be easily migrated.
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 | Package-lock.json |
|---|---|
| It records the minimum version of the package that the project needs. If we update packages to the latest version, that will not have any effect on package.json. | It records the exact version of each installed package which allows you to re-install them. Future installs will be able to build an identical dependency. |
| The package.json is used for more than dependencies - like defining project properties, description, author & license information, scripts, etc. | The package-lock.json is all about the packages. And locking them to a particular version. |
| We cannot build an Ionic project without this file. | We can build an Ionic Project without this. |
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.
1. Base service
Clear all
Clear all@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 = "test@test.com"
}
}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 most frequently posed Ionic framework interview questions, be ready to answer this conceptual question.
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.
Observable and promises are used to execute asynchronous tasks in Ionic. For Ex: Making network calls, Checking the internet connection etc.
| Observable | Promise |
|---|---|
| Computation does not start until subscription so you can run then only when you need the result | Execute immediately after creation |
| Provide multiple values over time | Provide only one |
| Subscribe method is used for error handling which makes centralized and predictable error handling | Pushes errors to the child promises |
| Provides chaining and subscription to handle complex applications | Uses only .then() clause |
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)) 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.
A staple in Ionic concepts interview questions and answers, be prepared to answer this one using your hands-on experience.
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'
}
]
}
]; This is one of the most frequently asked Ionic interview questions for freshers in recent times. Make sure you go through the solution carefully.
A staple in Ionic developer interview questions with answers, be prepared to answer this using your hands-on experience. This is also one of the top interview questions to ask an Ionic developer. Here is a sample answer.
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);
} 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();
});
}); Slides is a UI component. This component is used as a container for layouts such as photo galleries, tutorials, questionnaires etc. A slides component can have one or more slides. User can swipe or drag to move to next slide.
Below is a brief example. Add the two functions to component.ts file and the html markup to view.
genderUpdate(gender)
{
if(gender == "M" || gender == "F")
{
this.iGender = gender;
this.slides.lockSwipes(false);
// let currentSlide = this.slides.getActiveIndex() + 1;
this.slides.slideNext();
this.slides.lockSwipes(true);
}
} ageGroupSelected(event) a
{
if(event)
{
this.ageGroup = event;
this.slides.lockSwipes(false);
this.slides.slideNext();
this.slides.lockSwipes(true);
}
} <ion-slides>
<ion-slide lockSwipeToNext="false">
<button ion-button color="danger"> Select Your Gender </button>
<ion-card class="genderIcon" (click)="genderUpdate('M')" color="danger">
<ion-card-header>
<ion-card-title> Male </ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-icon name="man"></ion-icon>
</ion-card-content>
</ion-card>
<ion-card class="genderIcon" margin-top (click)="genderUpdate('F')" color="danger">
<ion-card-header>
<ion-card-title> Female </ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-icon name="woman"></ion-icon>
</ion-card-content>
</ion-card>
</ion-slide>
<ion-slide lockSwipeToNext="false">
<ion-list radio-group [(ngModel)]="ageGroup" (ionChange)="ageGroupSelected($event)">
<ion-list-header class="headTitle" color="danger">
My Age Group is
</ion-list-header>
<ion-item>
<ion-label color="primary"> 0 - 17 </ion-label>
<ion-radio value="child"></ion-radio>
</ion-item>
<ion-item>
<ion-label color="primary"> 18 - 100 </ion-label>
<ion-radio value="adult" ></ion-radio>
</ion-item>
</ion-list>
</ion-slide>
</ion-slides> To create a button, we can use ion-button component. Ion-button comes with few attributes like fill , size, shape , color.
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>
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> 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)); The command ionic g module creates a folder of same name as module and creates the module within the new folder. To skip creating new folder , use --flat option which will create the module directly in src/app folder. Below command will create test.module.ts file in src/app/ . ionic g module test --flat.
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.
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> Cloud FireStore is a NoSQL Document based database from Firebase. It keeps the data in sync across client apps through real-time listeners and offers offline support for mobile and web. Using Firestore, we can directly update data from the app.
1. To use firestore, first create a project on https://firebase.google.com. Then add FireStore to the project.
2. Add the config settings to your ionic app’s environment file as below :
export const environment = {
production: false,
firebase: {
apiKey: "your-api-key-goes-here",
authDomain: "project.firebaseapp.com",
databaseURL: "https://project.firebaseio.com",
projectId: "projectid-here",
storageBucket: "project.appspot.com",
messagingSenderId: "msging-id-here"
}
}; 3. Add Firebase and AngularFire2 to your ionic project with this command
npm install firebase angularfire2 --save
4. create a page and add a service to your project
ionic g page pages/categorylist ionic g service services/category
5. Import AngularFire and AngularFirestoreModule in your app.module.ts file and add to NgModule
import { AngularFireModule } from 'angularfire2';
import { environment } from './../environments/environment';
import { AngularFirestoreModule } from 'angularfire2/firestore';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(),FormsModule,
HttpClientModule, AppRoutingModule, BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
], bootstrap: [AppComponent]
})6. Import AngularFirestore and AngularFirestoreCollection in your service .
import { AngularFirestore, AngularFirestoreCollection } from
'angularfire2/firestore'; 7. Initialize db connection in constructor of service file and fetch data in real time from firestore collection with snapshotChanges() function. Also write a get function to return the output.
constructor(private http:HttpClient, db: AngularFirestore) {
this.categoryListCollection = db.collection<any>('category');
this.categoryList = this.categoryListCollection.snapshotChanges().pipe(
map(actions => {
return actions.map(a => {
console.log(a.payload.doc.data());
const data = a.payload.doc.data().categoryName;
const id = a.payload.doc.id;
return {id, data};
});
})
);
} getCategoryList() {
return this.categoryList;
} 8. Now import the service in your page and subscribe to the get function.
ngOnInit() {
this.expenseService.getCategoryList().subscribe(res => {
this.categoryList = res;
});
} 9. Run a ngFor loop through the recordset in your view to display live data
<ion-list>
<ion-item *ngFor="let category of categoryList">
{{category.data}}
</ion-item>
</ion-list> This is one of the most frequently asked Ionic interview questions and answers for freshers in recent times. Keep a close eye on the steps mentioned above.
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 enables to use one codebase to build apps for various platforms. Today, the total number of Ionic-built apps exceeds 4 million. This framework doesn’t support apps for huge brands like Facebook or Instagram.
Developers are crazy about Ionic, as it enables them to use one codebase to build apps for various platforms. The total number of Ionic-built apps exceeds 4 million. Although this framework is not able to support apps for huge brands such as Instagram or Facebook, Ionic developers are continuously building high-quality apps, thus broadening the overall presence of hybrid apps on the highly competitive market. This article brings you the list of 10 interesting apps built with Ionic, which showcases the potential that this hybrid mobile app framework possesses.
Ready to face interview for Ionic? Do not worry, we are here to help you with job interview preparation. If you are preparing for Ionic job interview and not sure which questions are likely asked in interview, we suggest you to go through these Ionic interview questions and answers to crack your job interview. Many organizations use this framework to develop apps. There are many jobs related to this across the globe.
We’ve brought you a list of most frequently asked Ionic framework interview questions along with the answers which your interviewer expects at the time of Ionic interview. Ionic interview questions and answers have been designed specially to get you familiarized with the nature of the questions.
Learning and practicing these Ionic framework interview questions will help you to land your dream job. Ionic interview questions and answers here will surely boost your confidence to face interview and will definitely prepare you to answer the toughest of questions in the best way. So, in order to succeed in the Ionic interview you need to read and re-read these Ionic interview questions and answers.
Do keep visiting these interview questions on Ionic framework which will enable you to crack your upcoming interviews easily.
All the best for your upcoming Ionic interview.
Get a 1:1 Mentorship call with our Career Advisor
Book free session
