Function SelectDevice

Decorator that subscribes to the current device type from the device service.

This decorator automatically updates the decorated property whenever the device type changes (typically when the viewport is resized). The device type indicates roughly how big the viewport is, not what actual device is being used. It's the recommended approach over manual subscriptions as it handles subscription lifecycle automatically.

Returns

A PropertyDecorator that sets up automatic subscription to device type

Remarks

Subscribes to: Device service

Updates: The decorated property with DeviceType ('desktop', 'tablet', or 'phone')

Viewport-aware: Automatically updates when viewport size changes

Lifecycle: Automatically subscribes in connectedCallback and unsubscribes in disconnectedCallback

Example

Basic usage with Stencil component

@State()
@SelectDevice()
private deviceType: DeviceType;

render() {
    return (
        <div class={`layout-${this.deviceType}`}>
            <p>Viewing on: {this.deviceType}</p>
        </div>
    );
}

Example

Conditional rendering based on device

@State()
@SelectDevice()
private device: DeviceType;

render() {
    if (this.device === 'phone') {
        return <button class="hamburger-menu">Menu</button>;
    }

    return (
        <nav class="full-menu">
            <a href="/home">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    );
}