next

.gitignore

@@ -40,4 +40,5 @@ Thumbs.db
 
 .angular
 
-.nx/cache
+.nx/cache
+.nx/workspace-data

.node-version

@@ -1 +1 @@
-20.9.0
+20.12.2

.prettierignore

@@ -3,4 +3,5 @@
 /coverage
 .angular
 
-/.nx/cache
+/.nx/cache
+/.nx/workspace-data

.prettierrc

@@ -7,7 +7,8 @@
   "arrowParens": "avoid",
   "trailingComma": "es5",
   "bracketSameLine": true,
+  "htmlWhitespaceSensitivity": "ignore",
   "printWidth": 80,
   "endOfLine": "auto",
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
 }

README.md

@@ -18,24 +18,38 @@ import {
   observeBreakpoints,
 } from 'ngx-breakpoint-observer';
 
-const breakpoints = observeBreakpoints(breakpointsTailwind);
-
-const smAndLarger = breakpoints.greaterOrEqual('sm'); // sm and larger
-const largerThanSm = breakpoints.greater('sm'); // only larger than sm
-const lgAndSmaller = breakpoints.smallerOrEqual('lg'); // lg and smaller
-const smallerThanLg = breakpoints.smaller('lg'); // only smaller than lg
+@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
+}
 ```
 
 ```ts
 import { observeBreakpoints } from 'ngx-breakpoint-observer';
 
-const breakpoints = observeBreakpoints({
-  tablet: 640,
-  laptop: 1024,
-  desktop: 1280,
-});
-
-const laptop = breakpoints.between('laptop', 'desktop');
+@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

apps/demo/eslint.config.js

@@ -0,0 +1,53 @@
+const { FlatCompat } = require('@eslint/eslintrc');
+const baseConfig = require('../../eslint.config.js');
+const js = require('@eslint/js');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+module.exports = [
+  ...baseConfig,
+  ...compat
+    .config({
+      extends: [
+        'plugin:@nx/angular',
+        'plugin:@angular-eslint/template/process-inline-templates',
+      ],
+    })
+    .map(config => ({
+      ...config,
+      files: ['**/*.ts'],
+      rules: {
+        ...config.rules,
+        '@angular-eslint/directive-selector': [
+          'error',
+          {
+            type: 'attribute',
+            prefix: 'demo',
+            style: 'camelCase',
+          },
+        ],
+        '@angular-eslint/component-selector': [
+          'error',
+          {
+            type: 'element',
+            prefix: 'demo',
+            style: 'kebab-case',
+          },
+        ],
+        '@angular-eslint/component-class-suffix': ['off'],
+        '@angular-eslint/directive-class-suffix': ['off'],
+      },
+    })),
+  ...compat
+    .config({ extends: ['plugin:@nx/angular-template'] })
+    .map(config => ({
+      ...config,
+      files: ['**/*.html'],
+      rules: {
+        ...config.rules,
+      },
+    })),
+];

apps/demo/project.json

@@ -13,10 +13,13 @@
         "outputPath": "dist/apps/demo",
         "index": "apps/demo/src/index.html",
         "main": "apps/demo/src/main.ts",
-        "polyfills": ["zone.js"],
+        "polyfills": [],
         "tsConfig": "apps/demo/tsconfig.app.json",
         "assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
-        "styles": ["apps/demo/src/styles.css"],
+        "styles": [
+          "apps/demo/src/styles.css",
+          "node_modules/highlight.js/styles/github.min.css"
+        ],
         "scripts": []
       },
       "configurations": {

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

@@ -1,53 +1,25 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import {
-  breakpointsTailwind,
-  observeBreakpoints,
-} from 'ngx-breakpoint-observer';
-import { JsonPipe } from '@angular/common';
-import { provideIcons } from '@ng-icons/core';
-import { DemoSnipped } from './components/snipped';
-import { simpleGithub } from '@ng-icons/simple-icons';
-import { DemoHeader } from './components/header';
-import { DemoBreakpoint } from './components/breakpoint';
+import { Demo } from './components/demo';
+import { Footer } from './components/footer';
+import { Header } from './components/header';
+import { Installation } from './components/installation';
+import { Usage } from './components/usage';
 
 @Component({
   standalone: true,
-  imports: [JsonPipe, DemoSnipped, DemoHeader, DemoBreakpoint],
+  imports: [Header, Installation, Demo, Usage, Footer],
   selector: 'demo-root',
-  viewProviders: [provideIcons({ simpleGithub })],
   template: `
-    <div class="m-auto h-screen max-w-[1000px] overflow-auto p-4 sm:p-10">
-      <main class="flex flex-col items-center justify-center gap-5">
-        <demo-header />
+    <main
+      class="container m-auto flex flex-col gap-10 px-4 pb-4 pt-16 sm:px-10 sm:pb-10 sm:pt-24">
+      <demo-header />
 
-        <div class="flex flex-col text-center font-medium">
-          <p class="py-5">
-            Resize your window to see breakpoints value changes.
-          </p>
-
-          <div>Current breakpoints: {{ current() | json }}</div>
-          <demo-breakpoint name="xs" [value]="xs()" />
-          <demo-breakpoint name="sm" [value]="sm()" />
-          <demo-breakpoint name="md" [value]="md()" />
-          <demo-breakpoint name="lg" [value]="lg()" />
-          <demo-breakpoint name="xl" [value]="xl()" />
-          <demo-breakpoint name="2xl" [value]="xxl()" />
-        </div>
-
-        <demo-snipped class="w-full" />
-      </main>
-    </div>
+      <demo-installation />
+      <demo-demo />
+      <demo-usage />
+      <demo-footer />
+    </main>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
-  breakpoints = observeBreakpoints(breakpointsTailwind);
-
-  current = this.breakpoints.current();
-  xs = this.breakpoints.smallerOrEqual('sm');
-  sm = this.breakpoints.between('sm', 'md');
-  md = this.breakpoints.between('md', 'lg');
-  lg = this.breakpoints.between('lg', 'xl');
-  xl = this.breakpoints.between('xl', '2xl');
-  xxl = this.breakpoints.greaterOrEqual('2xl');
-}
+export class AppComponent {}

apps/demo/src/app/app.config.ts

@@ -1,12 +1,14 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { HighlightJsModule } from 'ngx-highlight-js';
-import { provideNgIconsConfig } from '@ng-icons/core';
+import {
+  ApplicationConfig,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
+import { provideRouter, Routes } from '@angular/router';
+
+export const routes: Routes = [];
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    importProvidersFrom(HighlightJsModule),
-    provideNgIconsConfig({
-      size: '1em',
-    }),
+    provideExperimentalZonelessChangeDetection(),
+    provideRouter(routes),
   ],
 };

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

@@ -1,17 +1,19 @@
-import { Component, Input, Signal } from '@angular/core';
-import { input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'demo-breakpoint',
   standalone: true,
-  template: ` <p>
-    {{ name() }}:
-    <span [class]="value() ? 'text-green-500' : 'text-red-500'">
-      {{ value() }}
-    </span>
-  </p>`,
+  template: `
+    <p>
+      {{ name() }}:
+      <span [class]="value() ? 'text-green-500' : 'text-red-500'">
+        {{ value() }}
+      </span>
+    </p>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DemoBreakpoint {
+export class Breakpoint {
   name = input.required<string>();
   value = input.required<boolean>();
 }