Ionic Angular vibration integration tutorial; Throughout the comprehensive tutorial you will find out how to add vibration in Ionic Angular application with the help of Ionic Native not only but also Cordova vibration plugin.
Device vibration amplifies the user-experience, It gets user’s attention suddenly when interacting with specific settings or even when clicked or tapped on something essential.
Adding vibration in Ionic application is made simple by Ionic native and Cordova packages, On top of that it supports all the modern devices or platforms for instance iOS, Android and Windows.
Let us begin finding out how to add vibration in Ionic application:
Install Ionic App
Make sure you have properly added Node and NPM on your system, plus install ionic cli tool with given below command:
npm install -g @ionic/cli
Then, execute command to install blank new Angular Ionic application:
ionic start ionic-demo blank --type=angular
Get into the project folder:
ionic-demo
Remove Type Errors
You have to remove strict type errors make sure to set “strictTemplates”: false
in angularCompilerOptions in tsconfig.json file.
Add Vibration Plugin in Ionic
Now, we assume you have landed on the project root. Next, open terminal and type the following command to install Ionic native and Cordova vibration plugin into the Ionic app.
ionic cordova plugin add cordova-plugin-vibration
npm install @ionic-native/vibration
Register Vibration Module in App Module
Subsequently, we will add the vibration module into the ionic’s main AppModule class, hence open app.module.ts file, and add the following code:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Vibration } from '@ionic-native/vibration/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
Vibration,
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
}
],
bootstrap: [AppComponent],
})
export class AppModule {}
Add Vibration in Ionic 6
In this step, we will implement vibration in ionic, also we will show you how to add single vibration for 3 seconds, multiple vibration with time pattern likewise show you how to stop vibration.
First you need to import and inject vibration plugin into the home typescript template as displayed into the below example.
import { Component } from '@angular/core';
import { Vibration } from '@ionic-native/vibration/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private vibrationPlugin: Vibration) {}
// Vibration methods goes below ...
}
Single Vibration
To create single vibration in Ionic, access the vibrate()
method and pass the duration or timing in milliseconds into the method. Most importantly the default vibration timing is 3 seconds.
singleVibration(time) {
this.vibrationPlugin.vibrate(time);
}
Multiple Vibration with Pattern
To vibrate in pattern or vibrate multiple times, again access the vibrate method but into the parameter section pass an array or duration due to which it vibrates in particular time pattern.
multipleVibration(patternArray) {
this.vibrationPlugin.vibrate(patternArray);
}
Stop Vibration
You can easily stop vibration in Ionic by using the vibrate() method and passing the 0 into parameter section.
haltVibration() {
this.vibrationPlugin.vibrate(0);
}
Complete Code Example
Eventually, here is the final full code example that you have to add into the TypeScript and HTML template. Ideally, verily it is complete adjoining of custom methods and plugin import into the above example.
Update home.page.ts file:
import { Component } from '@angular/core';
import { Vibration } from '@ionic-native/vibration/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private vibrationPlugin: Vibration) {}
singleVibration(time) {
this.vibrationPlugin.vibrate(time);
}
multipleVibration(patternArray) {
this.vibrationPlugin.vibrate(patternArray);
}
haltVibration() {
this.vibrationPlugin.vibrate(0);
}
}
Update home.page.html file:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic Vibration Integration Example
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<h3>Single Vibration</h3>
<ion-button expand="full" (click)="singleVibration()">Single vibration</ion-button>
<h3>Multiple Vibrate with Pattern</h3>
<ion-button expand="full" (click)="multipleVibration([1000, 2000, 4000, 2000, 5000])">Vibration Pattern</ion-button>
<h3>Stop Current Vibration</h3>
<ion-button expand="full" (click)="haltVibration()">Halt vibration</ion-button>
</ion-content>
Test Ionic Vibration App
Finally, let’s test the application, make sure to add platform, create runnable build on top of that start app on the emulator or real device.
Add Platform
# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android
# Windows
ionic cordova platform add windows
Create Build
# iOS
ionic cordova build ios
# Android
ionic cordova build android
# Windows
ionic cordova build windows
Start App
# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l
# Windows
ionic cordova run windows -l
Conclusion
Throughout the guide we ascertained how to integrate vibration in our ionic app with the help of Ionic Native and Cordova plugins.