ngx-breakpoint-observer

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

The code is directly inspired by VueUse.

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