ngx-breakpoint-observer

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

The code is directly inspired by VueUse.

Installation

npm install ngx-breakpoint-observer

Usage

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

@Component({})
export class AppComponent {
  breakpoints = observeBreakpoints(breakpointsTailwind);

  reactiveStuff = signal<keyof typeof breakpointsTailwind>('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
}

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