@reactgular/devices
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

Build Status Coverage Status npm version

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.

Readme

Keywords

Package Sidebar

Install

npm i @reactgular/devices

Weekly Downloads

0

Version

2.0.1

License

MIT

Unpacked Size

61.2 kB

Total Files

21

Last publish

Collaborators

  • codemile