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.