docs: improve demo and usage documentation

Author: tutkli

README.md

@@ -18,29 +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({
-  mobile: 0, // optional
-  tablet: 640,
-  laptop: 1024,
-  desktop: 1280,
-});
-
-// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
-const activeBreakpoint = breakpoints.active();
-
-// true or false
-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/src/app/components/demo.ts

@@ -1,5 +1,5 @@
 import { JsonPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
   breakpointsTailwind,
   observeBreakpoints,
@@ -24,13 +24,19 @@ import { Breakpoint } from './breakpoint';
       <demo-breakpoint name="lg" [value]="lg()" />
       <demo-breakpoint name="xl" [value]="xl()" />
       <demo-breakpoint name="2xl" [value]="xxl()" />
+      <demo-breakpoint
+        name="Greater than signal"
+        [value]="isGreaterThanSignal()" />
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Demo {
   breakpoints = observeBreakpoints(breakpointsTailwind);
 
+  reactiveStuff = signal<keyof typeof breakpointsTailwind>('sm');
+  isGreaterThanSignal = this.breakpoints.greaterOrEqual(this.reactiveStuff);
+
   current = this.breakpoints.current();
   active = this.breakpoints.active();
   xs = this.breakpoints.smallerOrEqual('sm');

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

@@ -18,25 +18,34 @@ export class Usage {
   observeBreakpoints,
 } from 'ngx-breakpoint-observer';
 
-const breakpoints = observeBreakpoints(breakpointsTailwind);
+@Component({})
+export class AppComponent {
+  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`;
+  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
+}`;
 
   usage2 = `import { observeBreakpoints } from 'ngx-breakpoint-observer';
 
-const breakpoints = observeBreakpoints({
-  mobile: 0, // optional
-  tablet: 640,
-  laptop: 1024,
-  desktop: 1280,
-});
+@Component({})
+export class AppComponent {
+  breakpoints = observeBreakpoints({
+    mobile: 0, // optional
+    tablet: 640,
+    laptop: 1024,
+    desktop: 1280,
+  });
 
-// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
-const activeBreakpoint = breakpoints.active();
+  // Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
+  activeBreakpoint = this.breakpoints.active();
 
-// true or false
-const laptop = breakpoints.between('laptop', 'desktop');`;
+  // true or false
+  laptop = this.breakpoints.between('laptop', 'desktop');
+}`;
 }

libs/ngx-breakpoint-observer/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