https://github.com/tutkli/ngx-breakpoint-observer

Angular reactive breakpoint observer based on Signals.
https://github.com/tutkli/ngx-breakpoint-observer

Last synced: 23 days ago
JSON representation

Angular reactive breakpoint observer based on Signals.

• Host: GitHub
• URL: https://github.com/tutkli/ngx-breakpoint-observer
• Owner: tutkli
• License: mit
• Created: 2023-06-20T12:49:40.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-30T12:12:34.000Z (about 1 year ago)
• Last Synced: 2024-03-14T17:13:54.626Z (9 months ago)
• Language: TypeScript
• Homepage: https://tutkli.github.io/ngx-breakpoint-observer/
• Size: 290 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals. (Table of contents / Third Party Components)

README

        
# ngx-breakpoint-observer

This library adds reactive breakpoint and media query methods based on Signals.

The code is directly inspired by [VueUse](https://vueuse.org/).

## Installation

```shell

npm install ngx-breakpoint-observer

```

## Usage

```ts

import {

  breakpointsTailwind,

  observeBreakpoints,

} from 'ngx-breakpoint-observer';

@Component({})

export class AppComponent {

  breakpoints = observeBreakpoints(breakpointsTailwind);

  reactiveStuff = signal('sm');

  isGreaterThanSignal = this.breakpoints.greaterOrEqual(this.reactiveStuff); // use signal without calling it!

  smAndLarger = this.breakpoints.greaterOrEqual('sm'); // sm and larger

  largerThanSm = this.breakpoints.greater('sm'); // only larger than sm

  lgAndSmaller = this.breakpoints.smallerOrEqual('lg'); // lg and smaller

  smallerThanLg = this.breakpoints.smaller('lg'); // only smaller than lg

}

```

```ts

import { observeBreakpoints } from 'ngx-breakpoint-observer';

@Component({})

export class AppComponent {

  breakpoints = observeBreakpoints({

    mobile: 0, // optional

    tablet: 640,

    laptop: 1024,

    desktop: 1280,

  });

  // Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'

  activeBreakpoint = this.breakpoints.active();

  // true or false

  laptop = this.breakpoints.between('laptop', 'desktop');

}

```

## License

[MIT License](https://github.com/tutkli/ngx-breakpoint-observer/blob/master/LICENSE)