Devices

Devices is an Angular library that wraps around the BreakpointObserver
utility provided by the Angular Material CDK library.

Overview

Angular Material CDK library provides a BreakpointObserver utility
which emits state changes based upon screen and orientation of
the web browser. The problem with this library is that the matching
rules are broad in scope, and most developers just want to
know what device the user is using.

This library simplifies the business logic of responding to changes in
screen sizes and orientation.

Install

To get started, install the package from npm.

npm install @reactgular/devices

Once installed you need to import the DevicesModule module into your project.

import {DevicesModule} from '@reactgular/devices';
@NgModule({
    ...
    imports: [DevicesModule, ...],
    ...
})
export class AppModule {
}

Usage

You can use the DevicesService in your components or services by
injecting the service. There are a number of observable properties that
emit values relative to the type of device or orientation.

These properties of the service just make it easier to work with changes
to the device screen.

import {DevicesService} from '@reactgular/devices';
@Component({
   selector: 'app-example',
   template: `
    <div *ngIf="web$ | async">Web only</div>
    <div *ngIf="tablet$ | async">Tablet only</div>
    <div *ngIf="handset$ | async">Handset only</div>
   `
})
export class ExampleComponent {
    public web$: Observable<boolean>;
    public table$: Observable<boolean>;
    public handset$: Observable<boolean>;
    public constructor(devices: DevicesService) {
        this.web$ = devices.web$;
        this.tablet$ = devices.tablet$;
        this.handset$ = devices.handset$;
    }
}

Getting help

You are welcome to open issues for general support questions as well as bug reports and feature requests.