angular · hawkgs · Sep 3, 2026
diff --git a/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html b/...ts/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.html
@@ -1,7 +1,12 @@
-<as-split unit="percent" [direction]="splitDirection()" [gutterSize]="9">
-  <as-split-area #directiveForestSplitArea size="60">
+<as-split
+  unit="percent"
+  [ngResponsiveSplit]="tabSplitConfig"
+  direction="horizontal"
+  [gutterSize]="9"
+>
+  <as-split-area size="60">
     <as-split
-      [ngResponsiveSplit]="responsiveSplitConfig"
+      [ngResponsiveSplit]="forestSplitConfig"
       (directionChange)="onResponsiveSplitDirChange($event)"
       direction="vertical"
       [gutterSize]="9"

diff --git a/...ects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts b/...ects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-explorer.component.ts
@@ -8,8 +8,6 @@
 
 import {
   Component,
-  afterRenderEffect,
-  ElementRef,
   inject,
   input,
   output,
@@ -114,14 +112,9 @@ export class DirectiveExplorerComponent {
   readonly toggleInspector = output<void>();
 
   readonly directiveForest = viewChild.required(DirectiveForestComponent);
-  readonly splitElementRef = viewChild.required(SplitComponent, {read: ElementRef});
-  readonly directiveForestSplitArea = viewChild.required('directiveForestSplitArea', {
-    read: ElementRef,
-  });
 
   readonly currentSelectedElement = signal<IndexedNode | null>(null);
   readonly forest = signal<DevToolsNode[]>([]);
-  readonly splitDirection = signal<'horizontal' | 'vertical'>('horizontal');
   readonly parents = signal<FlatNode[] | null>(null);
 
   readonly signalsOpen = signal(false);
@@ -141,9 +134,17 @@ export class DirectiveExplorerComponent {
 
   protected readonly externallySelectedSignalNodeId = signal<{id: string} | null>(null);
 
-  protected readonly responsiveSplitConfig: ResponsiveSplitConfig = {
+  // Responsible for spliting behavior of the explorer and the props pane.
+  protected readonly tabSplitConfig: ResponsiveSplitConfig = {
+    defaultDirection: 'horizontal',
+    widthBreakpoint: '<500px',
+    breakpointDirection: 'vertical',
+  };
+
+  // Responsive for spliting behavior of the forest and the signal graph pane.
+  protected readonly forestSplitConfig: ResponsiveSplitConfig = {
     defaultDirection: 'vertical',
-    aspectRatioBreakpoint: 1.5,
+    aspectRatioBreakpoint: '>=1.5',
     breakpointDirection: 'horizontal',
   };
 
@@ -165,27 +166,6 @@ export class DirectiveExplorerComponent {
   private readonly currentElementPos = computed(() => this.currentSelectedElement()?.position);
 
   constructor() {
-    afterRenderEffect((cleanup) => {
-      const splitElement = this.splitElementRef().nativeElement;
-      const directiveForestSplitArea = this.directiveForestSplitArea().nativeElement;
-      const resizeObserver = new ResizeObserver((entries) => {
-        this.refreshHydrationNodeHighlightsIfNeeded();
-
-        const resizedEntry = entries[0];
-        if (resizedEntry.target === splitElement) {
-          this.splitDirection.set(
-            resizedEntry.contentRect.width <= 500 ? 'vertical' : 'horizontal',
-          );
-        }
-      });
-
-      resizeObserver.observe(splitElement);
-      resizeObserver.observe(directiveForestSplitArea);
-      cleanup(() => {
-        resizeObserver.disconnect();
-      });
-    });
-
     this.subscribeToBackendEvents();
     this.refresh();
     this.signalGraph.listen(this.currentElementPos);

diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.ts
@@ -122,7 +122,7 @@ export class InjectorTreeComponent {
 
   protected readonly responsiveSplitConfig: ResponsiveSplitConfig = {
     defaultDirection: 'vertical',
-    aspectRatioBreakpoint: 1.5,
+    aspectRatioBreakpoint: '>=1.5',
     breakpointDirection: 'horizontal',
   };
 

diff --git a/devtools/projects/ng-devtools/src/lib/shared/split/responsive-split.directive.spec.ts b/devtools/projects/ng-devtools/src/lib/shared/split/responsive-split.directive.spec.ts
@@ -69,21 +69,20 @@ class TestComponent {
   readonly split = viewChild.required(SplitComponent);
   readonly host = viewChild.required<ElementRef>('host');
 
-  readonly config: ResponsiveSplitConfig = {
-    defaultDirection: 'horizontal',
-    aspectRatioBreakpoint: 1.5,
-    breakpointDirection: 'vertical',
-  };
+  config!: ResponsiveSplitConfig;
 }
 
 async function initTestComponent(
+  config: ResponsiveSplitConfig,
   width: number,
   height: number,
 ): Promise<{host: DebugElement; split: SplitComponent}> {
+  TestBed.resetTestingModule();
   TestBed.configureTestingModule({
     providers: [{provide: WINDOW, useValue: {...window, ResizeObserver: ResizeObserverMockImpl}}],
   });
   const fixture = TestBed.createComponent(TestComponent);
+  fixture.componentInstance.config = config;
   await fixture.whenStable();
 
   const host = fixture.debugElement.query(By.css('as-split'));
@@ -110,27 +109,97 @@ describe('responsive-split', () => {
     jasmine.clock().install();
   });
 
-  it('should use horizontal direction (ratio == 1)', async () => {
-    const {split} = await initTestComponent(200, 200);
+  describe('aspectRatioBreakpoint', () => {
+    const config: ResponsiveSplitConfig = {
+      defaultDirection: 'horizontal',
+      aspectRatioBreakpoint: '>=1.5',
+      breakpointDirection: 'vertical',
+    };
 
-    expect(split.direction()).toEqual('horizontal');
-  });
+    it('should use horizontal direction (ratio == 1)', async () => {
+      const {split} = await initTestComponent(config, 200, 200);
 
-  it('should use horizontal direction (ratio == 1.49)', async () => {
-    const {split} = await initTestComponent(299, 200);
+      expect(split.direction()).toEqual('horizontal');
+    });
 
-    expect(split.direction()).toEqual('horizontal');
-  });
+    it('should use horizontal direction (ratio == 1.49)', async () => {
+      const {split} = await initTestComponent(config, 299, 200);
+
+      expect(split.direction()).toEqual('horizontal');
+    });
 
-  it('should use vertical direction (ratio == 1.5)', async () => {
-    const {split} = await initTestComponent(350, 200);
+    it('should use vertical direction (ratio == 1.5)', async () => {
+      const {split} = await initTestComponent(config, 350, 200);
 
-    expect(split.direction()).toEqual('vertical');
+      expect(split.direction()).toEqual('vertical');
+    });
+
+    it('should use vertical direction (ratio == 2)', async () => {
+      const {split} = await initTestComponent(config, 400, 200);
+
+      expect(split.direction()).toEqual('vertical');
+    });
   });
 
-  it('should use vertical direction (ratio == 2)', async () => {
-    const {split} = await initTestComponent(400, 200);
+  describe('widthBreakpoint', () => {
+    const config: ResponsiveSplitConfig = {
+      defaultDirection: 'horizontal',
+      widthBreakpoint: '<500px',
+      breakpointDirection: 'vertical',
+    };
+
+    it('should use horizontal direction (width == 600)', async () => {
+      const {split} = await initTestComponent(config, 600, 200);
+
+      expect(split.direction()).toEqual('horizontal');
+    });
+
+    it('should use horizontal direction (width == 500)', async () => {
+      const {split} = await initTestComponent(config, 500, 200);
+
+      expect(split.direction()).toEqual('horizontal');
+    });
+
+    it('should use vertical direction (width == 499)', async () => {
+      const {split} = await initTestComponent(config, 499, 200);
+
+      expect(split.direction()).toEqual('vertical');
+    });
+
+    it('should use vertical direction (width == 300)', async () => {
+      const {split} = await initTestComponent(config, 300, 200);
+
+      expect(split.direction()).toEqual('vertical');
+    });
+  });
 
-    expect(split.direction()).toEqual('vertical');
+  describe('Breakpoint operators', () => {
+    it('should support the `>` operator (aspect ratio)', async () => {
+      const config: ResponsiveSplitConfig = {
+        defaultDirection: 'horizontal',
+        aspectRatioBreakpoint: '>2',
+        breakpointDirection: 'vertical',
+      };
+
+      const atBoundary = await initTestComponent(config, 400, 200); // ratio == 2
+      expect(atBoundary.split.direction()).toEqual('horizontal');
+
+      const pastBoundary = await initTestComponent(config, 420, 200); // ratio == 2.1
+      expect(pastBoundary.split.direction()).toEqual('vertical');
+    });
+
+    it('should support the `<=` operator (width)', async () => {
+      const config: ResponsiveSplitConfig = {
+        defaultDirection: 'horizontal',
+        widthBreakpoint: '<=300',
+        breakpointDirection: 'vertical',
+      };
+
+      const atBoundary = await initTestComponent(config, 300, 200);
+      expect(atBoundary.split.direction()).toEqual('vertical');
+
+      const pastBoundary = await initTestComponent(config, 301, 200);
+      expect(pastBoundary.split.direction()).toEqual('horizontal');
+    });
   });
 });
diff --git a/devtools/projects/ng-devtools/src/lib/shared/split/responsive-split.directive.ts b/devtools/projects/ng-devtools/src/lib/shared/split/responsive-split.directive.ts
@@ -6,22 +6,43 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Directive, ElementRef, inject, input, DestroyRef, output} from '@angular/core';
+import {Directive, ElementRef, inject, input, DestroyRef, output, computed} from '@angular/core';
 import {WINDOW} from '../../application-providers/window_provider';
 import {Debouncer} from '../utils/debouncer';
 import {SplitComponent} from './split.component';
 import {Direction} from './interface';
 
 export const RESIZE_DEBOUNCE = 50; // in milliseconds
 
-export type ResponsiveSplitConfig = {
-  /** Default direction of the as-split (when < `aspectRatioBreakpoint`) */
+export type ResponsiveSplitConfig = AspectRatioConfig | WidthConfig;
+
+interface BaseConfig {
+  /** Default direction of the as-split. */
   defaultDirection: Direction;
-  /** Width to height ratio. If greater than or equal, `breakpointDirection` is applied. */
-  aspectRatioBreakpoint: number;
-  /** Default direction of the as-split (when >= `aspectRatioBreakpoint`) */
+
+  /** Direction that is applied when the breakpoint condition is true. */
   breakpointDirection: Direction;
-};
+}
+
+interface AspectRatioConfig extends BaseConfig {
+  /**
+   * Breakpoint condition based on the container aspect ration.
+   * When true, `breakpointDirection` is applied.
+   *
+   * Examples: `>1.5`, `<=2`, etc.
+   */
+  aspectRatioBreakpoint: string;
+}
+
+interface WidthConfig extends BaseConfig {
+  /**
+   * Breakpoint condition based on the container width (always in pixels).
+   * When true, `breakpointDirection` is applied.
+   *
+   * Examples: `>300`, `<=200px`, etc.
+   */
+  widthBreakpoint: string;
+}
 
 /** Make as-split direction responsive. */
 @Directive({
@@ -38,6 +59,21 @@ export class ResponsiveSplitDirective {
 
   protected readonly directionChange = output<Direction>();
 
+  private readonly parsedBpCondition = computed(() => {
+    const cfg = this.config();
+    const bp = isAspectRatioConfig(cfg)
+      ? cfg.aspectRatioBreakpoint
+      : isWidthConfig(cfg)
+        ? cfg.widthBreakpoint
+        : null;
+
+    if (!bp) {
+      throwError('Breakpoint not recognized.');
+    }
+
+    return parseBreakpointCondition(bp);
+  });
+
   constructor() {
     const debouncer = new Debouncer();
     // We use the ResizeObserver from the injected window object to allow mocking in tests.
@@ -58,12 +94,19 @@ export class ResponsiveSplitDirective {
   }
 
   private applyDirection(width: number, height: number) {
-    const ratio = width / height;
-    const {defaultDirection, breakpointDirection, aspectRatioBreakpoint} = this.config();
-    let newDir: Direction = defaultDirection;
+    const cfg = this.config();
+    let newDir: Direction = cfg.defaultDirection;
+    let shouldSwitch = false;
+
+    if (isAspectRatioConfig(cfg)) {
+      const ratio = width / height;
+      shouldSwitch = evalBreakpointCondition(this.parsedBpCondition(), ratio);
+    } else if (isWidthConfig(cfg)) {
+      shouldSwitch = evalBreakpointCondition(this.parsedBpCondition(), width);
+    }
 
-    if (ratio >= aspectRatioBreakpoint) {
-      newDir = breakpointDirection;
+    if (shouldSwitch) {
+      newDir = cfg.breakpointDirection;
     }
 
     if (this.host.direction() !== newDir) {
@@ -72,3 +115,65 @@ export class ResponsiveSplitDirective {
     }
   }
 }
+
+/** A helper that throws a `NgResponsiveSplit`-prefixed error. */
+function throwError(msg: string): never {
+  throw new Error(`NgResponsiveSplit: ${msg}`);
+}
+
+function isAspectRatioConfig(config: ResponsiveSplitConfig): config is AspectRatioConfig {
+  return 'aspectRatioBreakpoint' in config;
+}
+
+function isWidthConfig(config: ResponsiveSplitConfig): config is WidthConfig {
+  return 'widthBreakpoint' in config;
+}
+
+type Operator = 'gt' | 'lt' | 'gte' | 'lte';
+
+type Condition = {value: number; operator: Operator};
+
+const SIGN_TO_OPERATOR: {[key: string]: Operator} = {
+  '>': 'gt',
+  '<': 'lt',
+  '>=': 'gte',
+  '<=': 'lte',
+};
+
+function parseBreakpointCondition(bp: string): Condition {
+  if (!bp) {
+    throwError('Empty breakpoint condition.');
+  }
+  const parts = /([><=]+)(\s+)?(\d+(?:\.\d+)?)/.exec(bp);
+  if (!parts) {
+    throwError('Unable to parse breakpoint condition.');
+  }
+
+  const operator = SIGN_TO_OPERATOR[parts[1]];
+  if (!operator) {
+    throwError('Invalid breakpoint comparison operator ' + parts[1]);
+  }
+
+  const parsedValue = parseFloat(parts[3]);
+  if (isNaN(parsedValue)) {
+    throwError('Unable to parse breakpoint value.');
+  }
+
+  return {
+    value: parsedValue,
+    operator,
+  };
+}
+
+function evalBreakpointCondition({value, operator}: Condition, comparerVal: number): boolean {
+  switch (operator) {
+    case 'gt':
+      return comparerVal > value;
+    case 'gte':
+      return comparerVal >= value;
+    case 'lt':
+      return comparerVal < value;
+    case 'lte':
+      return comparerVal <= value;
+  }
+}