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
index 8fa9ea2a..df9ca130 100644
--- 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
@@ -1,4 +1,4 @@
-import { Directive, OnInit, OnDestroy, Inject, ElementRef } from '@angular/core'
+import { Directive, OnDestroy, ElementRef, inject } from '@angular/core'
 import { SplitGutterDirective } from './split-gutter.directive'
 import { GUTTER_NUM_TOKEN } from './gutter-num-token'
 
@@ -6,18 +6,16 @@ import { GUTTER_NUM_TOKEN } from './gutter-num-token'
   selector: '[asSplitGutterDragHandle]',
   standalone: true,
 })
-export class SplitGutterDragHandleDirective implements OnInit, OnDestroy {
-  constructor(
-    @Inject(GUTTER_NUM_TOKEN) private gutterNum: number,
-    private elementRef: ElementRef<HTMLElement>,
-    private gutterDir: SplitGutterDirective,
-  ) {}
+export class SplitGutterDragHandleDirective implements OnDestroy {
+  private readonly gutterNum = inject(GUTTER_NUM_TOKEN)
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef)
+  private readonly gutterDir = inject(SplitGutterDirective)
 
-  ngOnInit(): void {
-    this.gutterDir.addToMap(this.gutterDir.gutterToHandleElementMap, this.gutterNum, this.elementRef)
+  constructor() {
+    this.gutterDir._addToMap(this.gutterDir._gutterToHandleElementMap, this.gutterNum, this.elementRef)
   }
 
   ngOnDestroy(): void {
-    this.gutterDir.removedFromMap(this.gutterDir.gutterToHandleElementMap, this.gutterNum, this.elementRef)
+    this.gutterDir._removedFromMap(this.gutterDir._gutterToHandleElementMap, this.gutterNum, this.elementRef)
   }
 }
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
index 47aeae94..9d1a3c22 100644
--- 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
@@ -1,4 +1,4 @@
-import { Injector, Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core'
+import { Injector, Directive, ViewContainerRef, TemplateRef, input, effect, inject } from '@angular/core'
 import { GUTTER_NUM_TOKEN } from './gutter-num-token'
 
 interface SplitGutterDynamicInjectorTemplateContext {
@@ -14,30 +14,31 @@ interface SplitGutterDynamicInjectorTemplateContext {
   standalone: true,
 })
 export class SplitGutterDynamicInjectorDirective {
-  @Input('asSplitGutterDynamicInjector')
-  set gutterNum(value: number) {
-    this.vcr.clear()
+  private readonly vcr = inject(ViewContainerRef)
+  private readonly templateRef = inject<TemplateRef<SplitGutterDynamicInjectorTemplateContext>>(TemplateRef)
 
-    const injector = Injector.create({
-      providers: [
-        {
-          provide: GUTTER_NUM_TOKEN,
-          useValue: value,
-        },
-      ],
-      parent: this.vcr.injector,
-    })
+  protected readonly gutterNum = input.required<number>({ alias: 'asSplitGutterDynamicInjector' })
 
-    this.vcr.createEmbeddedView(this.templateRef, { $implicit: injector })
-  }
+  constructor() {
+    effect(() => {
+      this.vcr.clear()
+
+      const injector = Injector.create({
+        providers: [
+          {
+            provide: GUTTER_NUM_TOKEN,
+            useValue: this.gutterNum(),
+          },
+        ],
+        parent: this.vcr.injector,
+      })
 
-  constructor(
-    private vcr: ViewContainerRef,
-    private templateRef: TemplateRef<SplitGutterDynamicInjectorTemplateContext>,
-  ) {}
+      this.vcr.createEmbeddedView(this.templateRef, { $implicit: injector })
+    })
+  }
 
   static ngTemplateContextGuard(
-    dir: SplitGutterDynamicInjectorDirective,
+    _dir: SplitGutterDynamicInjectorDirective,
     ctx: unknown,
   ): ctx is SplitGutterDynamicInjectorTemplateContext {
     return true
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
index 97cccedb..1e50f95e 100644
--- 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
@@ -1,4 +1,4 @@
-import { Directive, OnInit, OnDestroy, Inject, ElementRef } from '@angular/core'
+import { Directive, OnDestroy, ElementRef, inject } from '@angular/core'
 import { SplitGutterDirective } from './split-gutter.directive'
 import { GUTTER_NUM_TOKEN } from './gutter-num-token'
 
@@ -6,18 +6,16 @@ import { GUTTER_NUM_TOKEN } from './gutter-num-token'
   selector: '[asSplitGutterExcludeFromDrag]',
   standalone: true,
 })
-export class SplitGutterExcludeFromDragDirective implements OnInit, OnDestroy {
-  constructor(
-    @Inject(GUTTER_NUM_TOKEN) private gutterNum: number,
-    private elementRef: ElementRef<HTMLElement>,
-    private gutterDir: SplitGutterDirective,
-  ) {}
+export class SplitGutterExcludeFromDragDirective implements OnDestroy {
+  private readonly gutterNum = inject(GUTTER_NUM_TOKEN)
+  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef)
+  private readonly gutterDir = inject(SplitGutterDirective)
 
-  ngOnInit(): void {
-    this.gutterDir.addToMap(this.gutterDir.gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
+  constructor() {
+    this.gutterDir._addToMap(this.gutterDir._gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
   }
 
   ngOnDestroy(): void {
-    this.gutterDir.removedFromMap(this.gutterDir.gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
+    this.gutterDir._removedFromMap(this.gutterDir._gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
   }
 }
diff --git a/projects/angular-split/src/lib/gutter/split-gutter.directive.ts b/projects/angular-split/src/lib/gutter/split-gutter.directive.ts
index 56ee38a4..0963696e 100644
--- a/projects/angular-split/src/lib/gutter/split-gutter.directive.ts
+++ b/projects/angular-split/src/lib/gutter/split-gutter.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, TemplateRef } from '@angular/core'
+import { Directive, ElementRef, inject, TemplateRef } from '@angular/core'
 import { SplitAreaComponent } from '../split-area/split-area.component'
 
 export interface SplitGutterTemplateContext {
@@ -38,22 +38,29 @@ export interface SplitGutterTemplateContext {
   standalone: true,
 })
 export class SplitGutterDirective {
+  readonly template = inject<TemplateRef<SplitGutterTemplateContext>>(TemplateRef)
+
   /**
    * The map holds reference to the drag handle elements inside instances
    * of the provided template.
+   *
+   * @internal
    */
-  gutterToHandleElementMap = new Map<number, ElementRef<HTMLElement>[]>()
+  readonly _gutterToHandleElementMap = new Map<number, ElementRef<HTMLElement>[]>()
   /**
    * The map holds reference to the excluded drag elements inside instances
    * of the provided template.
+   *
+   * @internal
    */
-  gutterToExcludeDragElementMap = new Map<number, ElementRef<HTMLElement>[]>()
-
-  constructor(public template: TemplateRef<SplitGutterTemplateContext>) {}
+  readonly _gutterToExcludeDragElementMap = new Map<number, ElementRef<HTMLElement>[]>()
 
-  canStartDragging(originElement: HTMLElement, gutterNum: number) {
-    if (this.gutterToExcludeDragElementMap.has(gutterNum)) {
-      const isInsideExclude = this.gutterToExcludeDragElementMap
+  /**
+   * @internal
+   */
+  _canStartDragging(originElement: HTMLElement, gutterNum: number) {
+    if (this._gutterToExcludeDragElementMap.has(gutterNum)) {
+      const isInsideExclude = this._gutterToExcludeDragElementMap
         .get(gutterNum)
         .some((gutterExcludeElement) => gutterExcludeElement.nativeElement.contains(originElement))
 
@@ -62,8 +69,8 @@ export class SplitGutterDirective {
       }
     }
 
-    if (this.gutterToHandleElementMap.has(gutterNum)) {
-      return this.gutterToHandleElementMap
+    if (this._gutterToHandleElementMap.has(gutterNum)) {
+      return this._gutterToHandleElementMap
         .get(gutterNum)
         .some((gutterHandleElement) => gutterHandleElement.nativeElement.contains(originElement))
     }
@@ -71,7 +78,10 @@ export class SplitGutterDirective {
     return true
   }
 
-  addToMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
+  /**
+   * @internal
+   */
+  _addToMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
     if (map.has(gutterNum)) {
       map.get(gutterNum).push(elementRef)
     } else {
@@ -79,7 +89,10 @@ export class SplitGutterDirective {
     }
   }
 
-  removedFromMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
+  /**
+   * @internal
+   */
+  _removedFromMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
     const elements = map.get(gutterNum)
     elements.splice(elements.indexOf(elementRef), 1)
 
@@ -88,7 +101,7 @@ export class SplitGutterDirective {
     }
   }
 
-  static ngTemplateContextGuard(dir: SplitGutterDirective, ctx: unknown): ctx is SplitGutterTemplateContext {
+  static ngTemplateContextGuard(_dir: SplitGutterDirective, ctx: unknown): ctx is SplitGutterTemplateContext {
     return true
   }
 }
diff --git a/projects/angular-split/src/lib/split/split.component.ts b/projects/angular-split/src/lib/split/split.component.ts
index def5f40d..6b9c4440 100644
--- a/projects/angular-split/src/lib/split/split.component.ts
+++ b/projects/angular-split/src/lib/split/split.component.ts
@@ -242,7 +242,10 @@ export class SplitComponent {
         filter(
           (context) =>
             !this.customGutter() ||
-            this.customGutter().canStartDragging(context.mouseDownEvent.target as HTMLElement, context.gutterIndex + 1),
+            this.customGutter()._canStartDragging(
+              context.mouseDownEvent.target as HTMLElement,
+              context.gutterIndex + 1,
+            ),
         ),
         switchMap((mouseDownContext) =>
           // As we have gutterClickDeltaPx we can't just start the drag but need to make sure