Ionic Interview Questions

Ionic developers are in high demand in the mobile development industry. To crack your next Ionic interview, prepare with these Ionic framework interview questions compiled by experts and pursue your career as a Mobile Application Developer, Frontend developer, and of course, an Ionic developer. Being thorough with these Ionic framework interview questions and answers will help you answer questions on Ionic CLI, different components in Ionic, how to create a new project using Ionic CLI, and also how to make Ionic apps to work in offline mode.

  • 4.6 Rating
  • 15 Question(s)
  • 25 Mins of Read
  • 3869 Reader(s)

Beginner

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.

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 . 

 

Advanced

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

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. 

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

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> 

Description

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.

Read More
Levels