https://github.com/tutkli/ngx-breakpoint-observer
Angular reactive breakpoint observer based on Signals.
https://github.com/tutkli/ngx-breakpoint-observer
angular breakpoints signals
Last synced: 2 months 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 (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-20T16:49:58.000Z (3 months ago)
- Last Synced: 2025-02-17T16:01:39.678Z (2 months ago)
- Topics: angular, breakpoints, signals
- Language: TypeScript
- Homepage: https://tutkli.github.io/ngx-breakpoint-observer/
- Size: 1.22 MB
- Stars: 8
- 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,
injectBreakpoints,
} from 'ngx-breakpoint-observer';
@Component({})
export class AppComponent {
breakpoints = injectBreakpoints(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 { injectBreakpoints } from 'ngx-breakpoint-observer';
@Component({})
export class AppComponent {
breakpoints = injectBreakpoints({
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)