Ionic 5/Angular – Use Vibration with Cordova and Ionic Native

In this tutorial, we will learn together how to use the Cordova Vibration plugin to vibrate apps built using Ionic 5/Angular framework. The example which we are going to build is simple with a button when clicked vibrate our device but of course this is just to demonstrate how to use vibration. You can use it as a base template for building a full featured real app with vibration and other features.

Let’s get started by generating a new project based on Ionic 3 or you can use it in an existing project.

Open your terminal or command prompt and run:

ionic start vibration-demo bank --type=angular

Next navigate inside your project root directory and install both the Cordova vibration plugin and its Ionic Native wrapper:

ionic cordova plugin add cordova-plugin-vibration --save npm install --save @ionic-native/vibration

Now we need to add it to the list of main module providers

Go ahead and open src/app/app.module.ts

Start by importing the Vibration wrapper from @ionic-native:

/* ... */import { Vibration } from '@ionic-native/vibration';/* ... */providers: [    StatusBar,    SplashScreen,    Vibration,    {provide: ErrorHandler, useClass: IonicErrorHandler}]})export class AppModule {}

After this ,you should be able to inject and use vibration in your component so open src/pages/home/home.ts

Then import and inject the vibration plugin

import { Vibration } from '@ionic-native/vibration';/* ... */@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage {    constructor(public navCtrl: NavController , private vibration :Vibration) {    }/* ... */

Next add a vibrate() method

vibrate(){    this.vibration.vibrate(1000);}

which is going to vibrate the device 1000 ms == 1 s ,you can also pass an array to vibrate()

vibrate(){    this.vibration.vibrate([1000 , 500 , 2000]);}

Which is going to vibrate the device 1s then pause half of second then vibrate it 2 seconds .

Now lets add a button and bind it click handler to the vibrate() method .

Open src/pages/home/home.html then add a button

<ion-header><ion-navbar>    <ion-title>Vibration example demo </ion-title></ion-navbar></ion-header><ion-content padding><button ion-button (click)="vibrate()">Vibrate ME </button></ion-content>    

The next step is to add a platform to your project .I will be using Android so

ionic cordova platform add android 

Then run on your device with live sync using

ionic run android -l 

Conclusion

We have seen how to use the Cordova vibration plugin and Ionic Native 3 to create an Ionic 5/Angular app that uses vibration.

Thanks for reading and see on the next tutorial.