Ionic 4/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 4/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
Please note that i'm using Ionic CLI 4 .

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 4/Angular app that uses vibration.

Thanks for reading and see on the next tutorial.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status