Next (angular 19)

apps/demo/eslint.config.js

@@ -50,4 +50,10 @@ module.exports = [
         ...config.rules,
       },
     })),
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/prefer-standalone': 'off',
+    },
+  },
 ];

apps/demo/src/app/app.component.ts

@@ -6,7 +6,6 @@ import { Installation } from './components/installation';
 import { Usage } from './components/usage';
 
 @Component({
-  standalone: true,
   imports: [Header, Installation, Demo, Usage, Footer],
   selector: 'demo-root',
   template: `

apps/demo/src/app/components/breakpoint.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'demo-breakpoint',
-  standalone: true,
   template: `
     <p>
       {{ name() }}:

apps/demo/src/app/components/code-block.ts

@@ -18,7 +18,6 @@ hljs.registerLanguage('xml', xml);
 
 @Component({
   selector: 'demo-code-block',
-  standalone: true,
   template: `
     <div class="group relative">
       <button

apps/demo/src/app/components/demo.ts

@@ -2,13 +2,12 @@ import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
   breakpointsTailwind,
-  observeBreakpoints,
+  injectBreakpoints,
 } from 'ngx-breakpoint-observer';
 import { Breakpoint } from './breakpoint';
 
 @Component({
   selector: 'demo-demo',
-  standalone: true,
   imports: [Breakpoint, JsonPipe],
   template: `
     <h2>Demo</h2>
@@ -32,7 +31,7 @@ import { Breakpoint } from './breakpoint';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Demo {
-  breakpoints = observeBreakpoints(breakpointsTailwind);
+  breakpoints = injectBreakpoints(breakpointsTailwind);
 
   reactiveStuff = signal<keyof typeof breakpointsTailwind>('sm');
   isGreaterThanSignal = this.breakpoints.greaterOrEqual(this.reactiveStuff);

apps/demo/src/app/components/footer.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'demo-footer',
-  standalone: true,
   template: `
     <footer class="border-t py-4">
       <p>Made with ❤️ by Tutkli.</p>

apps/demo/src/app/components/github-icon.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'demo-github-icon',
-  standalone: true,
   template: `
     <svg
       role="img"

apps/demo/src/app/components/header.ts

@@ -3,7 +3,6 @@ import { GitHubIcon } from './github-icon';
 
 @Component({
   selector: 'demo-header',
-  standalone: true,
   imports: [GitHubIcon],
   host: {
     class: 'flex flex-col w-full justify-center gap-5',

apps/demo/src/app/components/installation.ts

@@ -3,7 +3,6 @@ import { CodeBlock } from './code-block';
 
 @Component({
   selector: 'demo-installation',
-  standalone: true,
   imports: [CodeBlock],
   template: `
     <h2>Installation</h2>

apps/demo/src/app/components/usage.ts

@@ -3,7 +3,6 @@ import { CodeBlock } from './code-block';
 
 @Component({
   selector: 'demo-usage',
-  standalone: true,
   imports: [CodeBlock],
   template: `
     <h2>Usage</h2>

eslint.config.js

@@ -29,7 +29,7 @@ module.exports = [
   },
   ...compat.config({ extends: ['plugin:@nx/typescript'] }).map(config => ({
     ...config,
-    files: ['**/*.ts', '**/*.tsx'],
+    files: ['**/*.ts', '**/*.tsx', '**/*.cts', '**/*.mts'],
     rules: {
       ...config.rules,
       '@typescript-eslint/no-extra-semi': 'error',
@@ -38,7 +38,7 @@ module.exports = [
   })),
   ...compat.config({ extends: ['plugin:@nx/javascript'] }).map(config => ({
     ...config,
-    files: ['**/*.js', '**/*.jsx'],
+    files: ['**/*.js', '**/*.jsx', '**/*.cjs', '**/*.mjs'],
     rules: {
       ...config.rules,
       '@typescript-eslint/no-extra-semi': 'error',

jest.config.ts

@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});

libs/ngx-breakpoint-observer/eslint.config.js

@@ -56,4 +56,10 @@ module.exports = [
       '@nx/dependency-checks': 'error',
     },
   })),
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@angular-eslint/prefer-standalone': 'off',
+    },
+  },
 ];

libs/ngx-breakpoint-observer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-breakpoint-observer",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Angular reactive breakpoint observer based on Signals.",
   "bugs": {
     "url": "https://github.com/tutkli/ngx-breakpoint-observer/issues"

libs/ngx-breakpoint-observer/src/index.ts

@@ -3,6 +3,8 @@
  */
 
 export * from './lib/breakpoints';
+export * from './lib/inject-breakpoints';
+export * from './lib/inject-media-query';
 export * from './lib/observe-breakpoints';
 export * from './lib/observe-media-query';
 export * from './lib/types';

libs/ngx-breakpoint-observer/src/lib/inject-breakpoints.ts

@@ -0,0 +1,122 @@
+import { computed, Signal } from '@angular/core';
+import { injectMediaQuery } from './inject-media-query';
+import {
+  Breakpoints,
+  MaybeSignalOrGetter,
+  ObserveBreakpointsOptions,
+} from './types';
+import { defaultWindow, increaseWithUnit, toValue } from './utils';
+
+/**
+ * Reactive viewport breakpoints.
+ *
+ * This function provides a set of reactive utilities to handle viewport breakpoints.
+ * It includes shortcut methods like `greaterOrEqual`, `smallerOrEqual`, `between`, etc.
+ *
+ * @param breakpoints A map of breakpoint names and their corresponding values.
+ * @param options Configuration options such as window and strategy.
+ * @returns An object with breakpoint utilities and shortcut methods.
+ */
+export function injectBreakpoints<K extends string>(
+  breakpoints: Breakpoints<K>,
+  options: ObserveBreakpointsOptions = {}
+) {
+  const { window = defaultWindow, strategy = 'min-width' } = options;
+
+  function getValue(k: MaybeSignalOrGetter<K>, delta?: number): string {
+    let v = breakpoints[toValue(k)];
+
+    if (delta !== null && delta !== undefined) {
+      v = increaseWithUnit(v, delta);
+    }
+
+    if (typeof v === 'number') {
+      v = `${v}px`;
+    }
+
+    return v;
+  }
+
+  function match(query: string): boolean {
+    if (!window) return false;
+
+    return window.matchMedia(query).matches;
+  }
+
+  const greaterOrEqual = (k: MaybeSignalOrGetter<K>): Signal<boolean> => {
+    return injectMediaQuery(() => `(min-width: ${getValue(k)})`, options);
+  };
+
+  const smallerOrEqual = (k: MaybeSignalOrGetter<K>): Signal<boolean> => {
+    return injectMediaQuery(() => `(max-width: ${getValue(k)})`, options);
+  };
+
+  function current() {
+    const points = Object.keys(breakpoints).map(
+      i => [i, greaterOrEqual(i as K)] as const
+    );
+    return computed(() => points.filter(([, v]) => v()).map(([k]) => k));
+  }
+
+  const shortcutMethods = Object.keys(breakpoints).reduce((shortcuts, k) => {
+    Object.defineProperty(shortcuts, k, {
+      get: () =>
+        strategy === 'min-width'
+          ? greaterOrEqual(k as K)
+          : smallerOrEqual(k as K),
+      enumerable: true,
+      configurable: true,
+    });
+    return shortcuts;
+  }, {} as Record<K, Signal<boolean>>);
+
+  return Object.assign(shortcutMethods, {
+    greaterOrEqual,
+    smallerOrEqual,
+    greater(k: MaybeSignalOrGetter<K>) {
+      return injectMediaQuery(
+        () => `(min-width: ${getValue(k, 0.1)})`,
+        options
+      );
+    },
+    smaller(k: MaybeSignalOrGetter<K>) {
+      return injectMediaQuery(
+        () => `(max-width: ${getValue(k, -0.1)})`,
+        options
+      );
+    },
+    between(a: MaybeSignalOrGetter<K>, b: MaybeSignalOrGetter<K>) {
+      return injectMediaQuery(
+        () =>
+          `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`,
+        options
+      );
+    },
+    isGreater(k: MaybeSignalOrGetter<K>) {
+      return match(`(min-width: ${getValue(k, 0.1)})`);
+    },
+    isGreaterOrEqual(k: MaybeSignalOrGetter<K>) {
+      return match(`(min-width: ${getValue(k)})`);
+    },
+    isSmaller(k: MaybeSignalOrGetter<K>) {
+      return match(`(max-width: ${getValue(k, -0.1)})`);
+    },
+    isSmallerOrEqual(k: MaybeSignalOrGetter<K>) {
+      return match(`(max-width: ${getValue(k)})`);
+    },
+    isInBetween(a: MaybeSignalOrGetter<K>, b: MaybeSignalOrGetter<K>) {
+      return match(
+        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
+      );
+    },
+    current,
+    active() {
+      const breakpoints = current();
+      return computed(() =>
+        breakpoints().length === 0
+          ? ''
+          : breakpoints()[breakpoints().length - 1]
+      );
+    },
+  });
+}

libs/ngx-breakpoint-observer/src/lib/inject-media-query.ts

@@ -0,0 +1,47 @@
+import { DestroyRef, inject, signal, Signal } from '@angular/core';
+import { ConfigurableWindow, MaybeSignalOrGetter } from './types';
+import { defaultWindow, toValue } from './utils';
+
+/**
+ * Reactive Media Query.
+ *
+ * @param query Media query as a signal or getter or string.
+ * @param options Configuration options for window.
+ * @returns A read-only signal indicating whether the media query matches.
+ */
+export function injectMediaQuery(
+  query: MaybeSignalOrGetter<string>,
+  options: ConfigurableWindow = {}
+): Signal<boolean> {
+  const destroyRef = inject(DestroyRef);
+  const { window = defaultWindow } = options;
+  const isSupported =
+    window && 'matchMedia' in window && typeof window.matchMedia === 'function';
+
+  let mediaQuery: MediaQueryList | undefined;
+  const matches = signal(false);
+
+  const handler = (event: MediaQueryListEvent) => {
+    matches.set(event.matches);
+  };
+
+  if (isSupported) {
+    mediaQuery = window.matchMedia(toValue(query));
+    matches.set(mediaQuery.matches);
+    if ('addEventListener' in mediaQuery)
+      mediaQuery.addEventListener('change', handler);
+    // @ts-expect-error deprecated API
+    else mediaQuery.addListener(handler);
+  }
+
+  destroyRef.onDestroy(() => {
+    if (!mediaQuery) return;
+
+    if ('removeEventListener' in mediaQuery)
+      mediaQuery.removeEventListener('change', handler);
+    // @ts-expect-error deprecated API
+    else mediaQuery.removeListener(handler);
+  });
+
+  return matches.asReadonly();
+}

libs/ngx-breakpoint-observer/src/lib/observe-breakpoints.ts

@@ -8,7 +8,11 @@ import {
 import { defaultWindow, increaseWithUnit, toValue } from './utils';
 
 /**
- * Reactive viewport breakpoints
+ * **@deprecated** Use `injectBreakpoints` instead.
+ *
+ * This function will be removed in version `4.0.0`.
+ *
+ * Reactive viewport breakpoints.
  *
  * @param breakpoints
  * @param options

libs/ngx-breakpoint-observer/src/lib/observe-media-query.ts

@@ -3,6 +3,10 @@ import { ConfigurableWindow, MaybeSignalOrGetter } from './types';
 import { defaultWindow, toValue } from './utils';
 
 /**
+ * **@deprecated** Use `injectMediaQuery` instead.
+ *
+ * This function will be removed in version `4.0.0`.
+ *
  * Reactive Media Query.
  *
  * @param query

nx.json

@@ -59,5 +59,6 @@
     }
   },
   "useInferencePlugins": false,
-  "defaultBase": "master"
+  "defaultBase": "master",
+  "useLegacyCache": true
 }