angular-split · SanderElias · Feb 16, 2026 · Feb 13, 2026
diff --git a/projects/angular-split/src/lib/gutter/split-gutter-drag-handle.directive.ts b/projects/angular-split/src/lib/gutter/split-gutter-drag-handle.directive.ts
@@ -4,7 +4,6 @@ import { GUTTER_NUM_TOKEN } from './gutter-num-token'
 
 @Directive({
   selector: '[asSplitGutterDragHandle]',
-  standalone: true,
 })
 export class SplitGutterDragHandleDirective implements OnDestroy {
   private readonly gutterNum = inject(GUTTER_NUM_TOKEN)

diff --git a/projects/angular-split/src/lib/gutter/split-gutter-dynamic-injector.directive.ts b/projects/angular-split/src/lib/gutter/split-gutter-dynamic-injector.directive.ts
@@ -11,7 +11,6 @@ interface SplitGutterDynamicInjectorTemplateContext {
  */
 @Directive({
   selector: '[asSplitGutterDynamicInjector]',
-  standalone: true,
 })
 export class SplitGutterDynamicInjectorDirective {
   private readonly vcr = inject(ViewContainerRef)

diff --git a/projects/angular-split/src/lib/gutter/split-gutter-exclude-from-drag.directive.ts b/projects/angular-split/src/lib/gutter/split-gutter-exclude-from-drag.directive.ts
@@ -4,7 +4,6 @@ import { GUTTER_NUM_TOKEN } from './gutter-num-token'
 
 @Directive({
   selector: '[asSplitGutterExcludeFromDrag]',
-  standalone: true,
 })
 export class SplitGutterExcludeFromDragDirective implements OnDestroy {
   private readonly gutterNum = inject(GUTTER_NUM_TOKEN)

diff --git a/projects/angular-split/src/lib/gutter/split-gutter.directive.ts b/projects/angular-split/src/lib/gutter/split-gutter.directive.ts
@@ -35,7 +35,6 @@ export interface SplitGutterTemplateContext {
 
 @Directive({
   selector: '[asSplitGutter]',
-  standalone: true,
 })
 export class SplitGutterDirective {
   readonly template = inject<TemplateRef<SplitGutterTemplateContext>>(TemplateRef)

diff --git a/projects/angular-split/src/lib/split-area/split-area.component.ts b/projects/angular-split/src/lib/split-area/split-area.component.ts
@@ -1,7 +1,6 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  HostBinding,
   Signal,
   booleanAttribute,
   computed,
@@ -16,7 +15,6 @@ import { SplitAreaSize, areaSizeTransform, boundaryAreaSizeTransform } from '../
 
 @Component({
   selector: 'as-split-area',
-  standalone: true,
   exportAs: 'asSplitArea',
   templateUrl: './split-area.component.html',
   styleUrl: './split-area.component.css',
@@ -27,6 +25,12 @@ import { SplitAreaSize, areaSizeTransform, boundaryAreaSizeTransform } from '../
     },
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClasses()',
+    '[style.grid-column]': 'hostGridColumnStyle()',
+    '[style.grid-row]': 'hostGridRowStyle()',
+    '[style.position]': 'hostPositionStyle()',
+  },
 })
 export class SplitAreaComponent {
   protected readonly split = inject(SplitComponent)
@@ -58,28 +62,22 @@ export class SplitAreaComponent {
    */
   readonly _normalizedMaxSize = computed(() => this.normalizeMaxSize())
   private readonly index = computed(() => this.split._areas().findIndex((area) => area === this))
-  private readonly gridAreaNum = computed(() => this.index() * 2 + 1)
-  private readonly hostClasses = computed(() =>
+  protected readonly gridAreaNum = computed(() => this.index() * 2 + 1)
+  protected readonly hostClasses = computed(() =>
     createClassesString({
       ['as-split-area']: true,
       ['as-min']: this.visible() && this._internalSize() === this._normalizedMinSize(),
       ['as-max']: this.visible() && this._internalSize() === this._normalizedMaxSize(),
       ['as-hidden']: !this.visible(),
     }),
   )
-
-  @HostBinding('class') protected get hostClassesBinding() {
-    return this.hostClasses()
-  }
-  @HostBinding('style.grid-column') protected get hostGridColumnStyleBinding() {
-    return this.split.direction() === 'horizontal' ? `${this.gridAreaNum()} / ${this.gridAreaNum()}` : undefined
-  }
-  @HostBinding('style.grid-row') protected get hostGridRowStyleBinding() {
-    return this.split.direction() === 'vertical' ? `${this.gridAreaNum()} / ${this.gridAreaNum()}` : undefined
-  }
-  @HostBinding('style.position') protected get hostPositionStyleBinding() {
-    return this.split._isDragging() ? 'relative' : undefined
-  }
+  protected readonly hostGridColumnStyle = computed(() =>
+    this.split.direction() === 'horizontal' ? `${this.gridAreaNum()} / ${this.gridAreaNum()}` : undefined,
+  )
+  protected readonly hostGridRowStyle = computed(() =>
+    this.split.direction() === 'vertical' ? `${this.gridAreaNum()} / ${this.gridAreaNum()}` : undefined,
+  )
+  protected readonly hostPositionStyle = computed(() => (this.split._isDragging() ? 'relative' : undefined))
 
   private normalizeMinSize() {
     const defaultMinSize = 0

diff --git a/projects/angular-split/src/lib/split-custom-events-behavior.directive.ts b/projects/angular-split/src/lib/split-custom-events-behavior.directive.ts
@@ -37,7 +37,6 @@ import { DOCUMENT } from '@angular/common'
  */
 @Directive({
   selector: '[asSplitCustomEventsBehavior]',
-  standalone: true,
 })
 export class SplitCustomEventsBehaviorDirective {
   private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef)

diff --git a/projects/angular-split/src/lib/split/split.component.ts b/projects/angular-split/src/lib/split/split.component.ts
@@ -3,7 +3,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
-  HostBinding,
   InjectionToken,
   NgZone,
   afterRenderEffect,
@@ -84,6 +83,10 @@ export const SPLIT_AREA_CONTRACT = new InjectionToken<SplitAreaComponent>('Split
   templateUrl: './split.component.html',
   styleUrl: './split.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClasses()',
+    '[dir]': 'dir()',
+  },
 })
 export class SplitComponent {
   private readonly document = inject(DOCUMENT)
@@ -131,7 +134,7 @@ export class SplitComponent {
    */
   readonly _visibleAreas = computed(() => this._areas().filter((area) => area.visible()))
   private readonly gridTemplateColumnsStyle = computed(() => this.createGridTemplateColumnsStyle())
-  private readonly hostClasses = computed(() =>
+  protected readonly hostClasses = computed(() =>
     createClassesString({
       [`as-${this.direction()}`]: true,
       [`as-${this.unit()}`]: true,
@@ -151,14 +154,6 @@ export class SplitComponent {
    */
   readonly _alignedVisibleAreasSizes = computed(() => this.createAlignedVisibleAreasSize())
 
-  @HostBinding('class') protected get hostClassesBinding() {
-    return this.hostClasses()
-  }
-
-  @HostBinding('dir') protected get hostDirBinding() {
-    return this.dir()
-  }
-
   constructor() {
     if (isDevMode()) {
       // Logs warnings to console when the provided areas sizes are invalid