ScreenOrientation ​

Reactive wrapper around the Screen Orientation API. Returns a signal that tracks the current screen orientation.

Loading demo...

Usage ​

angular-ts
import { Component, effect } from '@angular/core';
import { screenOrientation } from '@signality/core';

@Component({
  template: `
    <p>Orientation: {{ orientation() }}</p>
  `,
})
export class OrientationDemo {
  readonly orientation = screenOrientation(); 
  
  constructor() {
    effect(() => {
      if (this.orientation() === 'landscape-primary') {
        console.log('Device is in landscape mode');
      }
    });
  }
}

Parameters ​

ParameterTypeDescription
optionsScreenOrientationOptionsOptional configuration (see Options below)

Options ​

The ScreenOrientationOptions extends Angular's CreateSignalOptions<OrientationType> and WithInjector:

OptionTypeDefaultDescription
initialValueOrientationType'portrait-primary'Initial orientation value for SSR
equalValueEqualityFn<OrientationType>-Custom equality function (see more)
debugNamestring-Debug name for the signal (development only)
injectorInjector-Optional injector for DI context

Return Value ​

Returns a Signal<OrientationType> containing the current screen orientation. Possible values:

  • 'portrait-primary' - Device is in primary portrait orientation
  • 'portrait-secondary' - Device is in secondary portrait orientation (rotated 180°)
  • 'landscape-primary' - Device is in primary landscape orientation
  • 'landscape-secondary' - Device is in secondary landscape orientation (rotated 180°)

Examples ​

Adaptive layout ​

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

@Component({
  template: `
    <div [class]="layoutClass()">
      <div class="content">Content</div>
    </div>
  `,
  styles: `
    .portrait {
      display: flex;
      flex-direction: column;
    }
    
    .landscape {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
  `,
})
export class AdaptiveLayout {
  readonly orientation = screenOrientation();
  
  readonly layoutClass = computed(() => {
    const orient = this.orientation();
    return orient.startsWith('portrait') ? 'portrait' : 'landscape';
  });
}

SSR Compatibility ​

On the server, the signal initializes with the value from initialValue option (defaults to 'portrait-primary'). You can provide a custom initial value for SSR:

typescript
const orientation = screenOrientation({
  initialValue: 'landscape-primary'
});

Type Definitions ​

typescript
interface ScreenOrientationOptions extends CreateSignalOptions<OrientationType>, WithInjector {
  readonly initialValue?: OrientationType;
}

function screenOrientation(options?: ScreenOrientationOptions): Signal<OrientationType>;
Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23