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.