Interface Device

Service for detecting the current device viewport size category

The Device service provides reactive methods to determine whether the current viewport size falls into desktop, tablet, or phone categories. This is useful for creating responsive components that adapt their UI based on available screen real estate.

Since Device extends StateRepository, components can use the @State decorator to automatically re-render when the device size category changes (e.g., when the user resizes their browser window or rotates their device).

Example

Checking device size

const device = this.platform.get(PlatformServiceName.Device);

if (device.isPhoneSize()) {
    return this.generateMobileExport();
}

return this.generateDesktopExport();

Example

Conditional logic based on viewport size

const device = this.platform.get(PlatformServiceName.Device);

if (device.isDesktopSize()) {
    columns = ['name', 'email', 'phone', 'address', 'status'];
} else if (device.isTabletSize()) {
    columns = ['name', 'email', 'status'];
} else {
    columns = ['name', 'status'];
}

Hierarchy

Methods

isDesktopSize isPhoneSize isTabletSize subscribe

Methods

isDesktopSize

  • Check if the current viewport size is in the desktop category

    Desktop size typically indicates a large screen with ample horizontal space for full-featured layouts, multiple columns, and detailed information display.

    Returns

    true if the viewport is desktop-sized, false otherwise

    Returns boolean

isPhoneSize

  • Check if the current viewport size is in the phone category

    Phone size typically indicates a small screen where compact layouts, single columns, and simplified navigation patterns are most appropriate.

    Returns

    true if the viewport is phone-sized, false otherwise

    Returns boolean

isTabletSize

  • Check if the current viewport size is in the tablet category

    Tablet size typically indicates a medium-sized screen where some layout adjustments may be needed compared to desktop, but more space is available than on phone screens.

    Returns

    true if the viewport is tablet-sized, false otherwise

    Returns boolean

subscribe

  • Subscribe to state changes with optional transformation and filtering.

    The subscription will immediately invoke the callback with the current state (if any), then continue to call it whenever the state changes. The map and filter options allow you to transform and selectively receive updates.

    Returns

    Unsubscribe function - call this to stop receiving updates

    Remarks

    • Map functions are applied sequentially to transform the state
    • Filter functions must all return true for the callback to be invoked
    • Functions in map/filter arrays are bound to the component instance
    • Always store and call the unsubscribe function when component is destroyed

    Example

    // Basic subscription
    const unsubscribe = repository.subscribe((state) => {
        console.log('State updated:', state);
    });

    // With transformations
    const unsubscribe = repository.subscribe(
        (userName) => console.log('User:', userName),
        { map: [(state) => state.user?.name] }
    );

    Parameters

    • callback: ((...args: unknown[]) => void)

      Function called with state updates (after map/filter applied)

        • (...args: unknown[]): void

        • Parameters

          • Rest ...args: unknown[]

          Returns void

    • Optional options: StateOptions

      Optional transformations and filters for the subscription

    Returns (() => void)

      • (): void

      • Subscribe to state changes with optional transformation and filtering.

        The subscription will immediately invoke the callback with the current state (if any), then continue to call it whenever the state changes. The map and filter options allow you to transform and selectively receive updates.

        Returns

        Unsubscribe function - call this to stop receiving updates

        Remarks

        • Map functions are applied sequentially to transform the state
        • Filter functions must all return true for the callback to be invoked
        • Functions in map/filter arrays are bound to the component instance
        • Always store and call the unsubscribe function when component is destroyed

        Example

        // Basic subscription
        const unsubscribe = repository.subscribe((state) => {
            console.log('State updated:', state);
        });

        // With transformations
        const unsubscribe = repository.subscribe(
            (userName) => console.log('User:', userName),
            { map: [(state) => state.user?.name] }
        );

        Returns void

Settings

Member Visibility

Theme