Configuration for state transformation and filtering via StateOptions
A PropertyDecorator that sets up automatic subscription to device type
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
Basic usage with Stencil component
@State()
@SelectDevice()
private deviceType: DeviceType;
render() {
return (
<div class={`layout-${this.deviceType}`}>
<p>Viewing on: {this.deviceType}</p>
</div>
);
}
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>
);
}
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.