diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts
index 7ed5efe42b..f5ec50ec1f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ellipsis.directive.ts
@@ -1,47 +1,48 @@
 import {
   AfterViewInit,
   ChangeDetectorRef,
+  computed,
   Directive,
   ElementRef,
-  HostBinding,
-  Input,
   inject,
-  input
+  input,
+  signal
 } from '@angular/core';
 
 @Directive({
   selector: '[abpEllipsis]',
+  host: {
+    '[title]': 'effectiveTitle()',
+    '[class.abp-ellipsis-inline]': 'inlineClass()',
+    '[class.abp-ellipsis]': 'ellipsisClass()',
+    '[style.max-width]': 'maxWidth()'
+  }
 })
 export class EllipsisDirective implements AfterViewInit {
   private cdRef = inject(ChangeDetectorRef);
   private elRef = inject(ElementRef);
 
-  readonly width = input<string>(undefined, { alias: "abpEllipsis" });
+  readonly width = input<string | undefined>(undefined, { alias: 'abpEllipsis' });
+  readonly title = input<string | undefined>(undefined);
+  readonly enabled = input(true, { alias: 'abpEllipsisEnabled' });
 
-  @HostBinding('title')
-  @Input()
-  title?: string;
+  private readonly autoTitle = signal<string | undefined>(undefined);
 
-  readonly enabled = input(true, { alias: "abpEllipsisEnabled" });
+  protected readonly effectiveTitle = computed(() => this.title() || this.autoTitle());
 
-  @HostBinding('class.abp-ellipsis-inline')
-  get inlineClass() {
-    return this.enabled() && this.width();
-  }
+  protected readonly inlineClass = computed(() => this.enabled() && !!this.width());
 
-  @HostBinding('class.abp-ellipsis')
-  get class() {
-    return this.enabled() && !this.width();
-  }
+  protected readonly ellipsisClass = computed(() => this.enabled() && !this.width());
 
-  @HostBinding('style.max-width')
-  get maxWidth() {
+  protected readonly maxWidth = computed(() => {
     const width = this.width();
     return this.enabled() && width ? width || '170px' : undefined;
-  }
+  });
 
   ngAfterViewInit() {
-    this.title = this.title || (this.elRef.nativeElement as HTMLElement).innerText;
-    this.cdRef.detectChanges();
+    if (!this.title()) {
+      this.autoTitle.set((this.elRef.nativeElement as HTMLElement).innerText);
+      this.cdRef.detectChanges();
+    }
   }
 }