Vibration

Reactive wrapper around the Vibration API. Trigger device vibration patterns with Angular signals.

Loading demo...

Usage

import { Component } from '@angular/core';
import { vibration } from '@signality/core';

@Component({
  template: `
    <button (click)="vib.vibrate()">Vibrate</button>
    <button (click)="vib.stop()">Stop</button>
  `,
})
export class VibrationDemo {
  readonly vib = vibration({ pattern: 200 }); 
}

Parameters

Parameter	Type	Description
options	VibrationOptions	Optional configuration (see Options below)

Options

Option	Type	Description
pattern	MaybeSignal<number | number[]>	Default vibration pattern in milliseconds
injector	Injector	Optional injector for DI context

Return Value

The vibration() function returns a VibrationRef object:

Property	Type	Description
isSupported	Signal<boolean>	Whether Vibration API is supported
isVibrating	Signal<boolean>	Whether currently vibrating
vibrate	(pattern?: number | number[]) => void	Start vibration (defaults to 200ms if no pattern provided)
stop	() => void	Stop vibration

Examples

Haptic feedback

import { Component } from '@angular/core';
import { vibration } from '@signality/core';

@Component({
  template: `
    <button (click)="onTap()">Tap Me</button>
  `,
})
export class HapticButton {
  readonly vib = vibration();
  
  onTap() {
    this.vib.vibrate(50); // Short 50ms vibration
  }
}

Vibration Patterns

The pattern can be passed at creation time or overridden when calling vibrate():

// Set default pattern at creation
const vib = vibration({ pattern: 200 });
vib.vibrate();

// Override pattern when calling vibrate()
vib.vibrate(100);
vib.vibrate([100, 50, 100]); // Pattern: vibrate, pause, vibrate

Browser Compatibility

The Vibration API has limited browser support, primarily on mobile devices. Always check isSupported() before using vibration (see Browser API support detection):

@if (vib.isSupported()) {
  <button (click)="vib.vibrate()">Vibrate</button>
} @else {
  <p>Vibration is not available on this device</p>
}

For detailed browser support information, see Can I use: Vibration API.

SSR Compatibility

On the server, signals initialize with safe defaults:

• isSupported → false
• isVibrating → false
• vibrate, stop → no-op functions

Type Definitions

interface VibrationOptions {
  readonly pattern?: MaybeSignal<number | number[]>;
  readonly injector?: Injector;
}

interface VibrationRef {
  readonly isSupported: Signal<boolean>;
  readonly isVibrating: Signal<boolean>;
  readonly vibrate: (pattern?: number | number[]) => void;
  readonly stop: () => void;
}

function vibration(options?: VibrationOptions): VibrationRef;

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousTextSelectionNextWebNotification