DevicePosture ​

Reactive wrapper around the Device Posture API. Track device posture state for foldable devices with Angular signals.

Loading demo...

Usage ​

angular-ts
import { Component } from '@angular/core';
import { devicePosture } from '@signality/core';

@Component({
  template: `
    <p>Posture: {{ posture.type() }}</p>
  `,
})
export class PostureDemo {
  readonly posture = devicePosture(); 
}

Use InjectionToken for Singleton

For global state tracking like devicePosture, consider using the provided DEVICE_POSTURE token instead of calling the function directly. This ensures a singleton instance shared across your entire application, reducing memory usage and event listener overhead:

typescript
import { inject } from '@angular/core';
import { DEVICE_POSTURE } from '@signality/core';

const posture = devicePosture(); 
const posture = inject(DEVICE_POSTURE);

Learn more about Token-based utilities.

Parameters ​

ParameterTypeDescription
optionsWithInjectorOptional configuration (see Options below)

Options ​

The WithInjector interface provides:

OptionTypeDescription
injectorInjectorOptional injector for DI context

Return Value ​

The devicePosture() function returns a DevicePostureRef object:

PropertyTypeDescription
isSupportedSignal<boolean>Whether Device Posture API is supported
typeSignal<DevicePostureType>Current device posture ('continuous' or 'folded')

Examples ​

Adaptive layout for foldable devices ​

angular-ts
import { Component, computed } from '@angular/core';
import { devicePosture } from '@signality/core';

@Component({
  template: `
    <div [class]="posture.type()">
      <div class="panel">Content</div>
    </div>
  `,
})
export class AdaptiveLayout {
  readonly posture = devicePosture();
}

Browser Compatibility ​

The Device Posture API has limited browser support. Always check isSupported() before relying on posture data (see Browser API support detection):

angular-html
@if (posture.isSupported()) {
  <p>Posture: {{ posture.type() }}</p>
} @else {
  <p>Device Posture API is not supported in this browser</p>
}

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

SSR Compatibility ​

On the server, signals initialize with safe defaults:

  • isSupported → false
  • type → 'continuous'

Type Definitions ​

typescript
type DevicePostureType = 'continuous' | 'folded';

interface DevicePostureRef {
  readonly isSupported: Signal<boolean>;
  readonly type: Signal<DevicePostureType>;
}

function devicePosture(options?: WithInjector): DevicePostureRef;

const DEVICE_POSTURE: InjectionToken<DevicePostureRef>;
Edit this page on GitHub Last updated: Aug 15, 2026, 15:21:44