NgxVibration

Angular directive for the Vibration API

Setup

• Install with npm:

npm i ngx-vibration

• Import NgxVibrationModule in your App Module.

import { NgxVibrationModule } from 'ngx-vibration';

@NgModule({
  imports: [..., NgxVibrationModule],
  ...
})
export class AppModule {}

Usage

Vibration Directive

The vibration directive causes the device to vibrate when the directive has been tapped by the user.

Add the ngxVibration directive to an HTML element. The directive takes a vibration pattern as input. The values of the array describes alternating periods of time in which the device is vibrating and not vibrating.

<button [ngxVibration]="[200, 100, 200]">VIBRATE</button>

<button [ngxVibration]="500">VIBRATE</button>

Or with the global config defaultPattern set:

<button ngxVibration>VIBRATE</button>

Vibration Service

export class AppComponent implements OnInit {
  hasVibrationSupport = false;

  constructor(private vibrationService: NgxVibrationService) {}

  ngOnInit() {
    this.hasVibrationSupport = this.vibrationService.hasVibrationSupport();
  }

  vibrate() {
    this.vibrationService.vibrate([200, 100, 200]);
  }

  cancelVibration() {
    this.vibrationService.cancelVibration();
  }
}

Global configuration

You can provide a default configuration object when importing the module using the forRoot() method.

NgxVibrationModule.forRoot({
  defaultPattern: [100, 0, 100]
})

Property	Type	Description
defaultPattern	number[]	The pattern to use by default when no other is specified on the directives