From c0d2b57f0198abba27cc228164e320ec598d6c4a Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Fri, 30 Jan 2026 23:22:03 +0300
Subject: [PATCH] Refactor to use Angular input signals across components

Replaces traditional @Input() properties with Angular's new input() signal API in multiple components, directives, and templates. Updates all usages to call input signal functions, ensuring compatibility and reactivity. This change modernizes the codebase, improves type safety, and prepares for future Angular features.
---
 .../chart.js/src/chart.component.ts           | 97 +++++++++----------
 .../abstract-actions.component.ts             |  5 +-
 .../extensible-form-prop.component.html       |  2 +-
 .../extensible-form-prop.component.ts         | 19 ++--
 .../extensible-table.component.html           | 12 +--
 .../extensible-table.component.ts             | 45 +++++----
 .../grid-actions/grid-actions.component.html  |  2 +-
 .../grid-actions/grid-actions.component.ts    |  5 +-
 .../src/lib/directives/prop-data.directive.ts | 21 ++--
 .../extensible/src/lib/models/actions.ts      | 20 ++--
 .../page/src/page-part.directive.ts           | 35 +++----
 .../components/page/src/page.component.html   |  2 +-
 .../components/page/src/page.component.ts     |  6 +-
 .../src/lib/abstracts/ng-model.component.ts   | 17 ++--
 .../src/lib/directives/debounce.directive.ts  |  6 +-
 .../core/src/lib/directives/for.directive.ts  | 63 ++++++------
 .../lib/directives/form-submit.directive.ts   | 31 +++---
 .../lib/directives/permission.directive.ts    | 10 +-
 .../replaceable-template.directive.ts         | 70 ++++++-------
 .../packages/setting-management/package.json  |  2 +-
 .../components/routes/routes.component.html   |  6 +-
 .../lib/components/routes/routes.component.ts |  4 +-
 .../lib/components/button/button.component.ts | 44 ++++-----
 .../components/card/card-body.component.ts    |  8 +-
 .../components/card/card-footer.component.ts  |  8 +-
 .../components/card/card-header.component.ts  |  8 +-
 .../src/lib/components/card/card.component.ts |  8 +-
 .../components/checkbox/checkbox.component.ts | 29 +++---
 .../form-input/form-input.component.ts        | 33 +++----
 .../loader-bar/loader-bar.component.ts        | 14 ++-
 .../password/password.component.html          |  2 +-
 .../components/password/password.component.ts |  6 +-
 .../toast-container.component.html            |  6 +-
 .../toast-container.component.ts              | 18 ++--
 .../lib/components/toast/toast.component.html |  6 +-
 .../lib/components/toast/toast.component.ts   | 20 ++--
 .../src/lib/directives/disabled.directive.ts  |  5 +-
 .../src/lib/directives/ellipsis.directive.ts  | 30 +++---
 .../src/lib/directives/loading.directive.ts   | 32 +++---
 .../ngx-datatable-default.directive.ts        |  6 +-
 .../ngx-datatable-list.directive.ts           | 33 ++++---
 41 files changed, 393 insertions(+), 403 deletions(-)

diff --git a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
index 9ab84aedcd..d4e697b48d 100644
--- a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
+++ b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
@@ -1,17 +1,17 @@
-import { 
-  AfterViewInit, 
-  ChangeDetectionStrategy, 
-  ChangeDetectorRef, 
-  Component, 
-  ElementRef, 
-  EventEmitter, 
-  Input, 
-  OnChanges, 
-  OnDestroy, 
-  Output, 
-  SimpleChanges, 
-  ViewChild, 
-  inject 
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  OnDestroy,
+  Output,
+  ViewChild,
+  effect,
+  inject,
+  input,
+  untracked,
 } from '@angular/core';
 
 let Chart: any;
@@ -21,13 +21,13 @@ let Chart: any;
   template: `
     <div
       style="position:relative"
-      [style.width]="responsive && !width ? null : width"
-      [style.height]="responsive && !height ? null : height"
+      [style.width]="responsive() && !width() ? null : width()"
+      [style.height]="responsive() && !height() ? null : height()"
     >
       <canvas
         #canvas
-        [attr.width]="responsive && !width ? null : width"
-        [attr.height]="responsive && !height ? null : height"
+        [attr.width]="responsive() && !width() ? null : width()"
+        [attr.height]="responsive() && !height() ? null : height()"
         (click)="onCanvasClick($event)"
       ></canvas>
     </div>
@@ -35,32 +35,39 @@ let Chart: any;
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'abpChart',
 })
-export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
+export class ChartComponent implements AfterViewInit, OnDestroy {
   el = inject(ElementRef);
   private cdr = inject(ChangeDetectorRef);
 
-  @Input() type!: string;
-
-  @Input() data: any = {};
-
-  @Input() options: any = {};
-
-  @Input() plugins: any[] = [];
-
-  @Input() width?: string;
-
-  @Input() height?: string;
-
-  @Input() responsive = true;
+  readonly type = input.required<string>();
+  readonly data = input<any>({});
+  readonly options = input<any>({});
+  readonly plugins = input<any[]>([]);
+  readonly width = input<string>();
+  readonly height = input<string>();
+  readonly responsive = input<boolean>(true);
 
   @Output() dataSelect = new EventEmitter();
-
   @Output() initialized = new EventEmitter<boolean>();
 
   @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;
 
   chart: any;
 
+  constructor() {
+    effect(() => {
+      const data = this.data();
+      const options = this.options();
+
+      untracked(() => {
+        if (this.chart) {
+          this.chart.destroy();
+          this.initChart();
+        }
+      });
+    });
+  }
+
   ngAfterViewInit() {
     import('chart.js/auto').then(module => {
       Chart = module.default;
@@ -91,19 +98,19 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
   }
 
   private initChart = () => {
-    const opts = this.options || {};
-    opts.responsive = this.responsive;
+    const opts = this.options() || {};
+    opts.responsive = this.responsive();
 
     // allows chart to resize in responsive mode
-    if (opts.responsive && (this.height || this.width)) {
+    if (opts.responsive && (this.height() || this.width())) {
       opts.maintainAspectRatio = false;
     }
 
     this.chart = new Chart(this.canvas.nativeElement, {
-      type: this.type as any,
-      data: this.data,
-      options: this.options,
-      plugins: this.plugins,
+      type: this.type() as any,
+      data: this.data(),
+      options: this.options(),
+      plugins: this.plugins(),
     });
   };
 
@@ -140,13 +147,5 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
       this.chart = null;
     }
   }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (!this.chart) return;
-
-    if (changes.data?.currentValue || changes.options?.currentValue) {
-      this.chart.destroy();
-      this.initChart();
-    }
-  }
 }
+
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts
index 465a18b813..e162310044 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/abstract-actions/abstract-actions.component.ts
@@ -1,4 +1,4 @@
-import { Directive, Injector, Input, inject } from '@angular/core';
+import { Directive, Injector, inject, input } from '@angular/core';
 import { ActionData, ActionList, InferredAction } from '../../models/actions';
 import { ExtensionsService } from '../../services/extensions.service';
 import { EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER } from '../../tokens/extensions.token';
@@ -14,7 +14,7 @@ export abstract class AbstractActionsComponent<
 
   readonly getInjected: InferredData<L>['getInjected'];
 
-  @Input() record!: InferredData<L>['record'];
+  record = input.required<InferredRecord<L>>();
 
   protected constructor() {
     const injector = inject(Injector);
@@ -27,3 +27,4 @@ export abstract class AbstractActionsComponent<
     this.actionList = extensions[type].get(name).actions as unknown as L;
   }
 }
+
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
index 2f9df1ae00..60af79b0ec 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -95,7 +95,7 @@
   <label [htmlFor]="prop.id" [class]="classes || 'form-label d-inline-block'">
     <span class="d-inline-flex align-items-center gap-1 text-nowrap">
       @if (prop.displayTextResolver) {
-      {{ prop.displayTextResolver(data) | abpLocalization }}
+      {{ prop.displayTextResolver(data()) | abpLocalization }}
       } @else {
       @if (prop.isExtra) {
       {{ '::' + prop.displayName | abpLocalization }}
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 09a29a98a9..b7745f3d48 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -22,6 +22,7 @@ import {
   ViewChild,
   signal,
   effect,
+  input
 } from '@angular/core';
 import {
   ControlContainer,
@@ -94,10 +95,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   private injector = inject(Injector);
   private readonly form = this.#groupDirective.form;
 
-  @Input() data!: PropData;
+  readonly data = input.required<PropData>();
   @Input() prop!: FormProp;
-  @Input() first?: boolean;
-  @Input() isFirstGroup?: boolean;
+  readonly first = input<boolean>(undefined);
+  readonly isFirstGroup = input<boolean>(undefined);
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
   injectorForCustomComponent?: Injector;
@@ -113,7 +114,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   disabledFn = (data: PropData) => false;
 
   get disabled() {
-    return this.disabledFn(this.data);
+    return this.disabledFn(this.data());
   }
 
   setTypeaheadValue(selectedOption: ABP.Option<string>) {
@@ -130,7 +131,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
       ? text$.pipe(
           debounceTime(300),
           distinctUntilChanged(),
-          switchMap(text => this.prop?.options?.(this.data, text) || of([])),
+          switchMap(text => this.prop?.options?.(this.data(), text) || of([])),
         )
       : of([]);
 
@@ -158,7 +159,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    if (this.isFirstGroup && this.first && this.fieldRef) {
+    if (this.isFirstGroup() && this.first() && this.fieldRef) {
       requestAnimationFrame(() => {
         this.fieldRef.nativeElement.focus();
       });
@@ -193,14 +194,14 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
       });
     }
 
-    if (options) this.options$ = options(this.data);
-    if (readonly) this.readonly = readonly(this.data);
+    if (options) this.options$ = options(this.data());
+    if (readonly) this.readonly = readonly(this.data());
 
     if (disabled) {
       this.disabledFn = disabled;
     }
     if (validators) {
-      this.validators = validators(this.data);
+      this.validators = validators(this.data());
       this.setAsterisk();
     }
     if (className !== undefined) {
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
index 8b0a5744b2..dcce4651ec 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@@ -1,9 +1,9 @@
 @if (isBrowser) {
-<ngx-datatable #table default [rows]="data" [count]="recordsTotal" [list]="list"
-  [selectionType]="selectable ? _selectionType : undefined" (activate)="tableActivate.emit($event)"
-  (select)="onSelect($event)" [selected]="selected" (scroll)="onScroll($event)" [scrollbarV]="infiniteScroll"
-  [style.height]="getTableHeight()" [loadingIndicator]="infiniteScroll && isLoading"
-  [footerHeight]="infiniteScroll ? false : 50">
+<ngx-datatable #table default [rows]="data" [count]="recordsTotal()" [list]="list()"
+  [selectionType]="selectable() ? _selectionType : undefined" (activate)="tableActivate.emit($event)"
+  (select)="onSelect($event)" [selected]="selected()" (scroll)="onScroll($event)" [scrollbarV]="infiniteScroll()"
+  [style.height]="getTableHeight()" [loadingIndicator]="infiniteScroll() && isLoading()"
+  [footerHeight]="infiniteScroll() ? false : 50">
   @if (effectiveRowDetailTemplate) {
   <ngx-datatable-row-detail [rowHeight]="effectiveRowDetailHeight">
     <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
@@ -22,7 +22,7 @@
     </ng-template>
   </ngx-datatable-column>
   }
-  @if(selectable) {
+  @if(selectable()) {
   <ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false"
     [resizeable]="false">
 
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
index 75253b1f02..a05c64ac4e 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
@@ -19,6 +19,7 @@ import {
   TemplateRef,
   TrackByFunction,
   ViewChild,
+  input
 } from '@angular/core';
 import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 
@@ -109,8 +110,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   }
 
   @Input() data!: R[];
-  @Input() list!: ListService;
-  @Input() recordsTotal!: number;
+  readonly list = input.required<ListService>();
+  readonly recordsTotal = input.required<number>();
 
   @Input() set actionsColumnWidth(width: number) {
     this._actionsColumnWidth.set(width ? Number(width) : undefined);
@@ -120,25 +121,25 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
 
   @Output() tableActivate = new EventEmitter();
 
-  @Input() selectable = false;
+  readonly selectable = input(false);
 
   @Input() set selectionType(value: SelectionType | string) {
     this._selectionType = typeof value === 'string' ? SelectionType[value] : value;
   }
   _selectionType: SelectionType = SelectionType.multiClick;
 
-  @Input() selected: any[] = [];
+  readonly selected = input<any[]>([]);
   @Output() selectionChange = new EventEmitter<any[]>();
 
   // Infinite scroll configuration
-  @Input() infiniteScroll = false;
-  @Input() isLoading = false;
-  @Input() scrollThreshold = 10;
+  readonly infiniteScroll = input(false);
+  readonly isLoading = input(false);
+  readonly scrollThreshold = input(10);
   @Output() loadMore = new EventEmitter<void>();
-  @Input() tableHeight: number;
+  readonly tableHeight = input<number>(undefined);
 
-  @Input() rowDetailTemplate?: TemplateRef<RowDetailContext<R>>;
-  @Input() rowDetailHeight: string | number = '100%';
+  readonly rowDetailTemplate = input<TemplateRef<RowDetailContext<R>>>(undefined);
+  readonly rowDetailHeight = input<string | number>('100%');
   @Output() rowDetailToggle = new EventEmitter<R>();
 
   @ContentChild(ExtensibleTableRowDetailComponent)
@@ -147,11 +148,11 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   @ViewChild('table', { static: false }) table!: DatatableComponent;
 
   protected get effectiveRowDetailTemplate(): TemplateRef<RowDetailContext<R>> | undefined {
-    return this.rowDetailComponent?.template() ?? this.rowDetailTemplate;
+    return this.rowDetailComponent?.template() ?? this.rowDetailTemplate();
   }
 
   protected get effectiveRowDetailHeight(): string | number {
-    return this.rowDetailComponent?.rowHeight() ?? this.rowDetailHeight;
+    return this.rowDetailComponent?.rowHeight() ?? this.rowDetailHeight();
   }
 
   hasAtLeastOnePermittedAction: boolean;
@@ -220,7 +221,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
     if (!data?.currentValue) return;
 
     if (data.currentValue.length < 1) {
-      this.list.totalCount = this.recordsTotal;
+      this.list().totalCount = this.recordsTotal();
     }
 
     this.data = data.currentValue.map((record: any, index: number) => {
@@ -278,8 +279,9 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   }
 
   onSelect({ selected }) {
-    this.selected.splice(0, this.selected.length);
-    this.selected.push(...selected);
+    const selectedValue = this.selected();
+    this.selected().splice(0, selectedValue.length);
+    selectedValue.push(...selected);
     this.selectionChange.emit(selected);
   }
 
@@ -299,12 +301,12 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   }
 
   private shouldHandleScroll(): boolean {
-    return this.infiniteScroll && !this.isLoading;
+    return this.infiniteScroll() && !this.isLoading();
   }
 
   private isNearScrollBottom(element: HTMLElement): boolean {
     const { offsetHeight, scrollTop, scrollHeight } = element;
-    return offsetHeight + scrollTop >= scrollHeight - this.scrollThreshold;
+    return offsetHeight + scrollTop >= scrollHeight - this.scrollThreshold();
   }
 
   private triggerLoadMore(): void {
@@ -312,9 +314,10 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   }
 
   getTableHeight() {
-    if (!this.infiniteScroll) return 'auto';
+    if (!this.infiniteScroll()) return 'auto';
 
-    return this.tableHeight ? `${this.tableHeight}px` : 'auto';
+    const tableHeight = this.tableHeight();
+    return tableHeight ? `${tableHeight}px` : 'auto';
   }
 
   toggleExpandRow(row: R): void {
@@ -325,8 +328,8 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   }
 
   ngAfterViewInit(): void {
-    if (!this.infiniteScroll) {
-      this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
+    if (!this.infiniteScroll()) {
+      this.list()?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
         this.data = [];
         this.cdr.markForCheck();
       });
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html
index 57a8b4a7fe..70e22ee3cf 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.html
@@ -1,7 +1,7 @@
 @if (actionList.length > 1) {
 <div ngbDropdown container="body" class="d-inline-block">
   <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" ngbDropdownToggle>
-    <i [class]="icon" [class.me-1]="icon"></i>{{ text | abpLocalization }}
+    <i [class]="icon()" [class.me-1]="icon()"></i>{{ text() | abpLocalization }}
   </button>
   <div ngbDropdownMenu>
     @for (action of actionList; track action.text) {
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts
index 9f7c28201e..3c7bdd075e 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/grid-actions/grid-actions.component.ts
@@ -3,6 +3,7 @@ import {
   Component,
   Input,
   TrackByFunction,
+  input
 } from '@angular/core';
 import { EntityAction, EntityActionList } from '../../models/entity-actions';
 import { EXTENSIONS_ACTION_TYPE } from '../../tokens/extensions.token';
@@ -33,11 +34,11 @@ import { NgTemplateOutlet } from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GridActionsComponent<R = any> extends AbstractActionsComponent<EntityActionList<R>> {
-  @Input() icon = 'fa fa-cog';
+  readonly icon = input('fa fa-cog');
 
   @Input() readonly index?: number;
 
-  @Input() text = '';
+  readonly text = input('');
 
   readonly trackByFn: TrackByFunction<EntityAction<R>> = (_, item) => item.text;
 
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts b/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts
index b7a05d314b..66ef16d177 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/directives/prop-data.directive.ts
@@ -1,13 +1,14 @@
 /* eslint-disable @angular-eslint/no-input-rename */
-import { 
-  Directive, 
-  Injector, 
-  Input, 
-  OnChanges, 
-  OnDestroy, 
-  TemplateRef, 
-  ViewContainerRef, 
-  inject 
+import {
+  Directive,
+  Injector,
+  Input,
+  OnChanges,
+  OnDestroy,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  input
 } from '@angular/core';
 import { PropData, PropList } from '../models/props';
 
@@ -22,7 +23,7 @@ export class PropDataDirective<L extends PropList<any>>
   private tempRef = inject<TemplateRef<any>>(TemplateRef);
   private vcRef = inject(ViewContainerRef);
 
-  @Input('abpPropDataFromList') propList?: L;
+  readonly propList = input<L>(undefined, { alias: "abpPropDataFromList" });
 
   @Input('abpPropDataWithRecord') record!: InferredData<L>['record'];
 
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/actions.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/actions.ts
index 40938aca44..566194745f 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/models/actions.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/models/actions.ts
@@ -1,4 +1,4 @@
-import { InjectionToken, InjectOptions, Type } from '@angular/core';
+import { InjectionToken, InjectOptions, InputSignal, isSignal, Type } from '@angular/core';
 import { LinkedList } from '@abp/utils';
 
 export abstract class ActionList<R = any, A = Action<R>> extends LinkedList<A> {}
@@ -10,18 +10,26 @@ export abstract class ActionData<R = any> {
     flags?: InjectOptions,
   ) => T;
   index?: number;
-  abstract record: R;
+  abstract record: R | InputSignal<R>;
 
   get data(): ReadonlyActionData<R> {
     return {
       getInjected: this.getInjected,
       index: this.index,
-      record: this.record,
+      record: isSignal(this.record) ? this.record() : this.record,
     };
   }
 }
 
-export type ReadonlyActionData<R = any> = Readonly<Omit<ActionData<R>, 'data'>>;
+export type ReadonlyActionData<R = any> = Readonly<{
+  getInjected: <T>(
+    token: Type<T> | InjectionToken<T>,
+    notFoundValue?: T,
+    flags?: InjectOptions,
+  ) => T;
+  index?: number;
+  record: R;
+}>;
 
 export abstract class Action<R = any> {
   constructor(
@@ -33,8 +41,8 @@ export abstract class Action<R = any> {
   ) {}
 }
 
-export type ActionCallback<T, R = any> = (data: Omit<ActionData<T>, 'data'>) => R;
-export type ActionPredicate<T> = (data?: Omit<ActionData<T>, 'data'>) => boolean;
+export type ActionCallback<T, R = any> = (data: ReadonlyActionData<T>) => R;
+export type ActionPredicate<T> = (data?: ReadonlyActionData<T>) => boolean;
 
 export abstract class ActionsFactory<C extends Actions<any>> {
   protected abstract _ctor: Type<C>;
diff --git a/npm/ng-packs/packages/components/page/src/page-part.directive.ts b/npm/ng-packs/packages/components/page/src/page-part.directive.ts
index bfaf1e60b6..e5f9908e5c 100644
--- a/npm/ng-packs/packages/components/page/src/page-part.directive.ts
+++ b/npm/ng-packs/packages/components/page/src/page-part.directive.ts
@@ -1,17 +1,18 @@
-import { 
-  Directive, 
-  TemplateRef, 
-  ViewContainerRef, 
-  Input, 
-  InjectionToken, 
-  OnInit, 
-  OnDestroy, 
-  Injector, 
-  OnChanges, 
-  SimpleChanges, 
-  SimpleChange, 
-  inject
- } from '@angular/core';
+import {
+  Directive,
+  TemplateRef,
+  ViewContainerRef,
+  Input,
+  InjectionToken,
+  OnInit,
+  OnDestroy,
+  Injector,
+  OnChanges,
+  SimpleChanges,
+  SimpleChange,
+  inject,
+  input
+} from '@angular/core';
 import { Observable, Subscription, of } from 'rxjs';
 
 export interface PageRenderStrategy {
@@ -36,7 +37,7 @@ export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
   type!: string;
   subscription!: Subscription;
 
-  @Input('abpPagePartContext') context: any;
+  readonly context = input<any>(undefined, { alias: "abpPagePartContext" });
   @Input() set abpPagePart(type: string) {
     this.type = type;
     this.createRenderStream(type);
@@ -60,7 +61,7 @@ export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
 
   ngOnInit() {
     if (this.renderLogic?.onInit) {
-      this.renderLogic.onInit(this.type, this.injector, this.context);
+      this.renderLogic.onInit(this.type, this.injector, this.context());
     }
   }
 
@@ -68,7 +69,7 @@ export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
     this.clearSubscription();
 
     if (this.renderLogic?.onDestroy) {
-      this.renderLogic.onDestroy(this.type, this.injector, this.context);
+      this.renderLogic.onDestroy(this.type, this.injector, this.context());
     }
   }
 
diff --git a/npm/ng-packs/packages/components/page/src/page.component.html b/npm/ng-packs/packages/components/page/src/page.component.html
index ee32f2e5e2..8cbaf2fdda 100644
--- a/npm/ng-packs/packages/components/page/src/page.component.html
+++ b/npm/ng-packs/packages/components/page/src/page.component.html
@@ -15,7 +15,7 @@
     @if (customBreadcrumb) {
       <ng-content select="abp-page-breadcrumb-container"></ng-content>
     } @else {
-      @if (breadcrumb) {
+      @if (breadcrumb()) {
         <div class="col-lg-auto ps-lg-0" *abpPagePart="pageParts.breadcrumb">
           <abp-breadcrumb></abp-breadcrumb>
         </div>
diff --git a/npm/ng-packs/packages/components/page/src/page.component.ts b/npm/ng-packs/packages/components/page/src/page.component.ts
index bd5242651f..3ee5b7c2db 100644
--- a/npm/ng-packs/packages/components/page/src/page.component.ts
+++ b/npm/ng-packs/packages/components/page/src/page.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, ViewEncapsulation, ContentChild } from '@angular/core';
+import { Component, Input, ViewEncapsulation, ContentChild, input } from '@angular/core';
 import {
   PageTitleContainerComponent,
   PageBreadcrumbContainerComponent,
@@ -29,7 +29,7 @@ export class PageComponent {
     return this._toolbarData;
   }
 
-  @Input() breadcrumb = true;
+  readonly breadcrumb = input(true);
 
   pageParts = {
     title: PageParts.title,
@@ -46,7 +46,7 @@ export class PageComponent {
     return !!(
       this.title ||
       this.toolbarVisible ||
-      this.breadcrumb ||
+      this.breadcrumb() ||
       this.customTitle ||
       this.customBreadcrumb ||
       this.customToolbar ||
diff --git a/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts b/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts
index 8e8ed6e66e..6f313d513b 100644
--- a/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, Input, input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 // Not an abstract class on purpose. Do not change!
@@ -14,20 +14,17 @@ export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAcc
   @Input()
   disabled?: boolean;
 
-  @Input()
-  readonly?: boolean;
+  readonly readonly = input<boolean>(undefined);
 
-  @Input()
-  valueFn: (value: U, previousValue?: T) => T = value => value as any as T;
+  readonly valueFn = input<(value: U, previousValue?: T) => T>(value => value as any as T);
 
-  @Input()
-  valueLimitFn: (value: T, previousValue?: T) => any = value => false;
+  readonly valueLimitFn = input<(value: T, previousValue?: T) => any>(value => false);
 
   @Input()
   set value(value: T) {
-    value = this.valueFn(value as any as U, this._value);
+    value = this.valueFn()(value as any as U, this._value);
 
-    if (this.valueLimitFn(value, this._value) !== false || this.readonly) return;
+    if (this.valueLimitFn()(value, this._value) !== false || this.readonly()) return;
 
     this._value = value;
     this.notifyValueChange();
@@ -48,7 +45,7 @@ export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAcc
   }
 
   writeValue(value: T): void {
-    this._value = this.valueLimitFn(value, this._value) || value;
+    this._value = this.valueLimitFn()(value, this._value) || value;
     this.cdRef.markForCheck();
   }
 
diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
index 239aed688d..da46ea0d1f 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, OnInit, Output, inject, input } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { SubscriptionService } from '../services/subscription.service';
@@ -11,13 +11,13 @@ export class InputEventDebounceDirective implements OnInit {
   private el = inject(ElementRef);
   private subscription = inject(SubscriptionService);
 
-  @Input() debounce = 300;
+  readonly debounce = input(300);
 
   @Output('input.debounce') readonly debounceEvent = new EventEmitter<Event>();
 
   ngOnInit(): void {
     const input$ = fromEvent<InputEvent>(this.el.nativeElement, 'input').pipe(
-      debounceTime(this.debounce),
+      debounceTime(this.debounce()),
     );
 
     this.subscription.addOne(input$, (event: Event) => {
diff --git a/npm/ng-packs/packages/core/src/lib/directives/for.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/for.directive.ts
index f26c12b706..6af8f968a8 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/for.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/for.directive.ts
@@ -1,7 +1,6 @@
 import {
   Directive,
   EmbeddedViewRef,
-  Input,
   IterableChangeRecord,
   IterableChanges,
   IterableDiffer,
@@ -11,6 +10,7 @@ import {
   TrackByFunction,
   ViewContainerRef,
   inject,
+  input
 } from '@angular/core';
 import clone from 'just-clone';
 import compare from 'just-compare';
@@ -42,29 +42,21 @@ export class ForDirective implements OnChanges {
   private differs = inject(IterableDiffers);
 
   // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('abpForOf')
-  items!: any[];
+  readonly items = input.required<any[]>({ alias: "abpForOf" });
 
-  @Input('abpForOrderBy')
-  orderBy?: string;
+  readonly orderBy = input<string>(undefined, { alias: "abpForOrderBy" });
 
-  @Input('abpForOrderDir')
-  orderDir?: 'ASC' | 'DESC';
+  readonly orderDir = input<'ASC' | 'DESC'>(undefined, { alias: "abpForOrderDir" });
 
-  @Input('abpForFilterBy')
-  filterBy?: string;
+  readonly filterBy = input<string>(undefined, { alias: "abpForFilterBy" });
 
-  @Input('abpForFilterVal')
-  filterVal: any;
+  readonly filterVal = input<any>(undefined, { alias: "abpForFilterVal" });
 
-  @Input('abpForTrackBy')
-  trackBy?: TrackByFunction<any>;
+  readonly trackBy = input<TrackByFunction<any>>(undefined, { alias: "abpForTrackBy" });
 
-  @Input('abpForCompareBy')
-  compareBy?: CompareFn;
+  readonly compareBy = input<CompareFn>(undefined, { alias: "abpForCompareBy" });
 
-  @Input('abpForEmptyRef')
-  emptyRef?: TemplateRef<any>;
+  readonly emptyRef = input<TemplateRef<any>>(undefined, { alias: "abpForEmptyRef" });
 
   private differ!: IterableDiffer<any> | null;
   private lastItemsRef: any[] | null = null;
@@ -72,11 +64,11 @@ export class ForDirective implements OnChanges {
   private isShowEmptyRef!: boolean;
 
   get compareFn(): CompareFn {
-    return this.compareBy || compare;
+    return this.compareBy() || compare;
   }
 
   get trackByFn(): TrackByFunction<any> {
-    return this.trackBy || ((index: number, item: any) => (item as any).id || index);
+    return this.trackBy() || ((index: number, item: any) => (item as any).id || index);
   }
 
   private iterateOverAppliedOperations(changes: IterableChanges<any>) {
@@ -91,7 +83,7 @@ export class ForDirective implements OnChanges {
         if (record.previousIndex == null) {
           const view = this.vcRef.createEmbeddedView(
             this.tempRef,
-            new AbpForContext(null, -1, -1, this.items),
+            new AbpForContext(null, -1, -1, this.items()),
             currentIndex || 0,
           );
 
@@ -120,7 +112,7 @@ export class ForDirective implements OnChanges {
       const viewRef = this.vcRef.get(i) as EmbeddedViewRef<AbpForContext>;
       viewRef.context.index = i;
       viewRef.context.count = l;
-      viewRef.context.list = this.items;
+      viewRef.context.list = this.items();
     }
 
     changes.forEachIdentityChange((record: IterableChangeRecord<any>) => {
@@ -132,9 +124,10 @@ export class ForDirective implements OnChanges {
   }
 
   private projectItems(items: any[]): void {
-    if (!items.length && this.emptyRef) {
+    const emptyRef = this.emptyRef();
+    if (!items.length && emptyRef) {
       this.vcRef.clear();
-      this.vcRef.createEmbeddedView(this.emptyRef).rootNodes;
+      this.vcRef.createEmbeddedView(emptyRef).rootNodes;
       this.isShowEmptyRef = true;
       this.differ = null;
       this.lastItemsRef = null;
@@ -142,7 +135,7 @@ export class ForDirective implements OnChanges {
       return;
     }
 
-    if (this.emptyRef && this.isShowEmptyRef) {
+    if (emptyRef && this.isShowEmptyRef) {
       this.vcRef.clear();
       this.isShowEmptyRef = false;
     }
@@ -162,7 +155,7 @@ export class ForDirective implements OnChanges {
   }
 
   private sortItems(items: any[]) {
-    const orderBy = this.orderBy;
+    const orderBy = this.orderBy();
     if (orderBy) {
       items.sort((a, b) => (a[orderBy] > b[orderBy] ? 1 : a[orderBy] < b[orderBy] ? -1 : 0));
     } else {
@@ -171,28 +164,30 @@ export class ForDirective implements OnChanges {
   }
 
   ngOnChanges() {
-    if (!this.items) return;
+    const itemsValue = this.items();
+    if (!itemsValue) return;
 
     // Recreate differ if items array reference changed
-    if (this.lastItemsRef !== this.items) {
+    if (this.lastItemsRef !== itemsValue) {
       this.differ = null;
-      this.lastItemsRef = this.items;
+      this.lastItemsRef = itemsValue;
     }
 
-    let items = clone(this.items) as any[];
+    let items = clone(itemsValue) as any[];
     if (!Array.isArray(items)) return;
 
     const compareFn = this.compareFn;
-    const filterBy = this.filterBy;
+    const filterBy = this.filterBy();
+    const filterVal = this.filterVal();
     if (
       typeof filterBy !== 'undefined' &&
-      typeof this.filterVal !== 'undefined' &&
-      this.filterVal !== ''
+      typeof filterVal !== 'undefined' &&
+      filterVal !== ''
     ) {
-      items = items.filter(item => compareFn(item[filterBy], this.filterVal));
+      items = items.filter(item => compareFn(item[filterBy], this.filterVal()));
     }
 
-    switch (this.orderDir) {
+    switch (this.orderDir()) {
       case 'ASC':
         this.sortItems(items);
         this.projectItems(items);
diff --git a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts
index 879fbdf780..21bab8d61c 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts
@@ -1,12 +1,12 @@
-import { 
-  ChangeDetectorRef, 
-  Directive, 
-  ElementRef, 
-  EventEmitter, 
-  Input, 
-  OnInit, 
-  Output, 
-  inject 
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  OnInit,
+  Output,
+  inject,
+  input
 } from '@angular/core';
 import { FormGroupDirective, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { fromEvent } from 'rxjs';
@@ -27,15 +27,12 @@ export class FormSubmitDirective implements OnInit {
   private cdRef = inject(ChangeDetectorRef);
   private subscription = inject(SubscriptionService);
 
-  @Input()
-  debounce = 200;
+  readonly debounce = input(200);
 
   // TODO: Remove unused input
-  @Input()
-  notValidateOnSubmit?: string | boolean;
+  readonly notValidateOnSubmit = input<string | boolean>(undefined);
 
-  @Input()
-  markAsDirtyWhenSubmit = true;
+  readonly markAsDirtyWhenSubmit = input(true);
 
   @Output() readonly ngSubmit = new EventEmitter();
 
@@ -43,7 +40,7 @@ export class FormSubmitDirective implements OnInit {
 
   ngOnInit() {
     this.subscription.addOne(this.formGroupDirective.ngSubmit, () => {
-      if (this.markAsDirtyWhenSubmit) {
+      if (this.markAsDirtyWhenSubmit()) {
         this.markAsDirty();
       }
 
@@ -51,7 +48,7 @@ export class FormSubmitDirective implements OnInit {
     });
 
     const keyup$ = fromEvent<KeyboardEvent>(this.host.nativeElement as HTMLElement, 'keyup').pipe(
-      debounceTime(this.debounce),
+      debounceTime(this.debounce()),
       filter(event => !(event.target instanceof HTMLTextAreaElement)),
       filter(event => event && event.key === 'Enter'),
     );
diff --git a/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts
index 2c17885984..b12782288d 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/permission.directive.ts
@@ -2,12 +2,12 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Directive,
-  Input,
   OnChanges,
   OnDestroy,
   TemplateRef,
   ViewContainerRef,
   inject,
+  input
 } from '@angular/core';
 import { ReplaySubject, Subscription } from 'rxjs';
 import { distinctUntilChanged, take } from 'rxjs/operators';
@@ -25,9 +25,9 @@ export class PermissionDirective implements OnDestroy, OnChanges, AfterViewInit
   private cdRef = inject(ChangeDetectorRef);
   queue = inject<QueueManager>(QUEUE_MANAGER);
 
-  @Input('abpPermission') condition: string | undefined;
+  readonly condition = input<string | undefined>(undefined, { alias: "abpPermission" });
 
-  @Input('abpPermissionRunChangeDetection') runChangeDetection = true;
+  readonly runChangeDetection = input(true, { alias: "abpPermissionRunChangeDetection" });
 
   subscription!: Subscription;
 
@@ -41,14 +41,14 @@ export class PermissionDirective implements OnDestroy, OnChanges, AfterViewInit
     }
 
     this.subscription = this.permissionService
-      .getGrantedPolicy$(this.condition || '')
+      .getGrantedPolicy$(this.condition() || '')
       .pipe(distinctUntilChanged())
       .subscribe(isGranted => {
         this.vcRef.clear();
         if (isGranted && this.templateRef) {
           this.vcRef.createEmbeddedView(this.templateRef);
         }
-        if (this.runChangeDetection) {
+        if (this.runChangeDetection()) {
           if (!this.rendered) {
             this.cdrSubject.next();
           } else {
diff --git a/npm/ng-packs/packages/core/src/lib/directives/replaceable-template.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/replaceable-template.directive.ts
index 7e948cc20f..4659f5b814 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/replaceable-template.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/replaceable-template.directive.ts
@@ -1,14 +1,14 @@
-import { 
-  Directive, 
-  Injector, 
-  Input, 
-  OnChanges, 
-  OnInit, 
-  SimpleChanges, 
-  TemplateRef, 
-  Type, 
-  ViewContainerRef, 
-  inject 
+import {
+  Directive,
+  Injector,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+  TemplateRef,
+  Type,
+  ViewContainerRef,
+  inject,
+  input
 } from '@angular/core';
 import compare from 'just-compare';
 import { Subscription } from 'rxjs';
@@ -29,8 +29,7 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
   private replaceableComponents = inject(ReplaceableComponentsService);
   private subscription = inject(SubscriptionService);
 
-  @Input('abpReplaceableTemplate')
-  data!: ReplaceableComponents.ReplaceableTemplateDirectiveInput<any, any>;
+  readonly data = input.required<ReplaceableComponents.ReplaceableTemplateDirectiveInput<any, any>>({ alias: "abpReplaceableTemplate" });
 
   providedData = {
     inputs: {},
@@ -59,7 +58,7 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
 
   ngOnInit() {
     const component$ = this.replaceableComponents
-      .get$(this.data.componentKey)
+      .get$(this.data().componentKey)
       .pipe(
         filter(
           (res = {} as ReplaceableComponents.ReplaceableComponent) =>
@@ -102,25 +101,26 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
   }
 
   setDefaultComponentInputs() {
-    if (!this.defaultComponentRef || (!this.data.inputs && !this.data.outputs)) return;
-
-    if (this.data.inputs) {
-      for (const key in this.data.inputs) {
-        if (Object.prototype.hasOwnProperty.call(this.data.inputs, key)) {
-          if (!compare(this.defaultComponentRef[key], this.data.inputs[key].value)) {
-            this.defaultComponentRef[key] = this.data.inputs[key].value;
+    const data = this.data();
+    if (!this.defaultComponentRef || (!data.inputs && !data.outputs)) return;
+
+    if (data.inputs) {
+      for (const key in data.inputs) {
+        if (Object.prototype.hasOwnProperty.call(data.inputs, key)) {
+          if (!compare(this.defaultComponentRef[key], data.inputs[key].value)) {
+            this.defaultComponentRef[key] = data.inputs[key].value;
           }
         }
       }
     }
 
-    if (this.data.outputs) {
-      for (const key in this.data.outputs) {
-        if (Object.prototype.hasOwnProperty.call(this.data.outputs, key)) {
+    if (data.outputs) {
+      for (const key in data.outputs) {
+        if (Object.prototype.hasOwnProperty.call(data.outputs, key)) {
           if (!this.defaultComponentSubscriptions[key]) {
             this.defaultComponentSubscriptions[key] = this.defaultComponentRef[key].subscribe(
               (value: any) => {
-                this.data.outputs?.[key](value);
+                this.data().outputs?.[key](value);
               },
             );
           }
@@ -130,24 +130,26 @@ export class ReplaceableTemplateDirective implements OnInit, OnChanges {
   }
 
   setProvidedData() {
-    this.providedData = { outputs: {}, ...this.data, inputs: {} };
+    this.providedData = { outputs: {}, ...this.data(), inputs: {} };
 
-    if (!this.data.inputs) return;
+    const data = this.data();
+    if (!data.inputs) return;
     Object.defineProperties(this.providedData.inputs, {
-      ...Object.keys(this.data.inputs).reduce(
+      ...Object.keys(data.inputs).reduce(
         (acc, key) => ({
           ...acc,
           [key]: {
             enumerable: true,
             configurable: true,
-            get: () => this.data.inputs?.[key]?.value,
-            ...(this.data.inputs?.[key]?.twoWay && {
+            get: () => this.data().inputs?.[key]?.value,
+            ...(this.data().inputs?.[key]?.twoWay && {
               set: (newValue: any) => {
-                if (this.data.inputs?.[key]) {
-                  this.data.inputs[key].value = newValue;
+                const dataValue = this.data();
+                if (dataValue.inputs?.[key]) {
+                  dataValue.inputs[key].value = newValue;
                 }
-                if (this.data.outputs?.[`${key}Change`]) {
-                  this.data.outputs[`${key}Change`](newValue);
+                if (dataValue.outputs?.[`${key}Change`]) {
+                  dataValue.outputs[`${key}Change`](newValue);
                 }
               },
             }),
diff --git a/npm/ng-packs/packages/setting-management/package.json b/npm/ng-packs/packages/setting-management/package.json
index b182196ce9..7961dca68a 100644
--- a/npm/ng-packs/packages/setting-management/package.json
+++ b/npm/ng-packs/packages/setting-management/package.json
@@ -12,7 +12,7 @@
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@angular/aria": "~21.1.0"
+    "@angular/aria": "~21.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
index a29fb3323e..afc498d5ac 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html
@@ -30,7 +30,7 @@
       </a>
       <div #routeContainer class="dropdown-menu border-0 shadow-sm"
         (click)="$event.preventDefault(); $event.stopPropagation()"
-        [class.d-block]="smallScreen && rootDropdownExpand[route.name]">
+        [class.d-block]="smallScreen() && rootDropdownExpand[route.name]">
         <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }" />
       </div>
     </li>
@@ -60,7 +60,7 @@
     <div class="dropdown-submenu" ngbDropdown #dropdownSubmenu="ngbDropdown" placement="right-top" [autoClose]="true"
       *abpPermission="child.requiredPolicy">
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
-        <a abpEllipsis="210px" [abpEllipsisEnabled]="!smallScreen" role="button"
+        <a abpEllipsis="210px" [abpEllipsisEnabled]="!smallScreen()" role="button"
           class="btn d-block text-start dropdown-toggle">
           @if (child.iconClass) {
           <i [class]="child.iconClass"></i>
@@ -69,7 +69,7 @@
         </a>
       </div>
       <div #childrenContainer class="dropdown-menu dropdown-menu-start border-0 shadow-sm"
-        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()">
+        [class.d-block]="smallScreen() && dropdownSubmenu.isOpen()">
         <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }" />
       </div>
     </div>
diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
index a6afd37b12..a2a44b38fb 100644
--- a/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
+++ b/npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.ts
@@ -10,11 +10,11 @@ import {
   Component,
   ElementRef,
   inject,
-  Input,
   QueryList,
   Renderer2,
   TrackByFunction,
   ViewChildren,
+  input
 } from '@angular/core';
 import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
@@ -39,7 +39,7 @@ export class RoutesComponent {
   public readonly routesService = inject(RoutesService);
   protected renderer = inject(Renderer2);
 
-  @Input() smallScreen?: boolean;
+  readonly smallScreen = input<boolean>(undefined);
 
   @ViewChildren('childrenContainer') childrenContainers!: QueryList<ElementRef<HTMLDivElement>>;
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index 47272992fd..652b484085 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -9,6 +9,7 @@ import {
   Renderer2,
   ViewChild,
   inject,
+  input
 } from '@angular/core';
 import { ABP, StopPropagationDirective } from '@abp/ng.core';
 
@@ -17,11 +18,11 @@ import { ABP, StopPropagationDirective } from '@abp/ng.core';
   template: `
     <button
       #button
-      [id]="buttonId"
-      [attr.type]="buttonType"
-      [attr.form]="formName"
-      [class]="buttonClass"
-      [disabled]="loading || disabled"
+      [id]="buttonId()"
+      [attr.type]="buttonType()"
+      [attr.form]="formName()"
+      [class]="buttonClass()"
+      [disabled]="loading || disabled()"
       (click.stop)="click.next($event); abpClick.next($event)"
       (focus)="focus.next($event); abpFocus.next($event)"
       (blur)="blur.next($event); abpBlur.next($event)"
@@ -34,29 +35,22 @@ import { ABP, StopPropagationDirective } from '@abp/ng.core';
 export class ButtonComponent implements OnInit {
   private renderer = inject(Renderer2);
 
-  @Input()
-  buttonId = '';
+  readonly buttonId = input('');
 
-  @Input()
-  buttonClass = 'btn btn-primary';
+  readonly buttonClass = input('btn btn-primary');
 
-  @Input()
-  buttonType = 'button';
+  readonly buttonType = input('button');
 
-  @Input()
-  formName?: string = undefined;
+  readonly formName = input<string>(undefined);
 
-  @Input()
-  iconClass?: string;
+  readonly iconClass = input<string>(undefined);
 
   @Input()
   loading = false;
 
-  @Input()
-  disabled: boolean | undefined = false;
+  readonly disabled = input<boolean | undefined>(false);
 
-  @Input()
-  attributes?: ABP.Dictionary<string>;
+  readonly attributes = input<ABP.Dictionary<string>>(undefined);
 
   @Output() readonly click = new EventEmitter<MouseEvent>();
 
@@ -74,14 +68,16 @@ export class ButtonComponent implements OnInit {
   buttonRef!: ElementRef<HTMLButtonElement>;
 
   get icon(): string {
-    return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass || 'd-none'}`;
+    return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass() || 'd-none'}`;
   }
 
   ngOnInit() {
-    if (this.attributes) {
-      Object.keys(this.attributes).forEach(key => {
-        if (this.attributes?.[key]) {
-          this.renderer.setAttribute(this.buttonRef.nativeElement, key, this.attributes[key]);
+    const attributes = this.attributes();
+    if (attributes) {
+      Object.keys(attributes).forEach(key => {
+        const attributesValue = this.attributes();
+        if (attributesValue?.[key]) {
+          this.renderer.setAttribute(this.buttonRef.nativeElement, key, attributesValue[key]);
         }
       });
     }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
index 6f8eade8d2..617271ca50 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts
@@ -1,13 +1,13 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-body',
-  template: ` <div [class]="cardBodyClass" [style]="cardBodyStyle">
+  template: ` <div [class]="cardBodyClass()" [style]="cardBodyStyle()">
     <ng-content></ng-content>
   </div>`,
 })
 export class CardBodyComponent {
   @HostBinding('class') componentClass = 'card-body';
-  @Input() cardBodyClass: string;
-  @Input() cardBodyStyle: string;
+  readonly cardBodyClass = input<string>(undefined);
+  readonly cardBodyStyle = input<string>(undefined);
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
index 3b96418fbd..95bcb91b88 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-footer.component.ts
@@ -1,9 +1,9 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-footer',
   template: `
-    <div [style]="cardFooterStyle" [class]="cardFooterClass">
+    <div [style]="cardFooterStyle()" [class]="cardFooterClass()">
       <ng-content></ng-content>
     </div>
   `,
@@ -12,6 +12,6 @@ import { Component, HostBinding, Input } from '@angular/core';
 })
 export class CardFooterComponent {
   @HostBinding('class') componentClass = 'card-footer';
-  @Input() cardFooterStyle: string;
-  @Input() cardFooterClass: string;
+  readonly cardFooterStyle = input<string>(undefined);
+  readonly cardFooterClass = input<string>(undefined);
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
index 3c31d16d74..692a261195 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card-header.component.ts
@@ -1,9 +1,9 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, input } from '@angular/core';
 
 @Component({
   selector: 'abp-card-header',
   template: `
-    <div [class]="cardHeaderClass" [style]="cardHeaderStyle">
+    <div [class]="cardHeaderClass()" [style]="cardHeaderStyle()">
       <ng-content></ng-content>
     </div>
   `,
@@ -12,6 +12,6 @@ import { Component, HostBinding, Input } from '@angular/core';
 })
 export class CardHeaderComponent {
   @HostBinding('class') componentClass = 'card-header';
-  @Input() cardHeaderClass: string;
-  @Input() cardHeaderStyle: string;
+  readonly cardHeaderClass = input<string>(undefined);
+  readonly cardHeaderStyle = input<string>(undefined);
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
index d65b8a12dc..8374d9f5e0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts
@@ -1,14 +1,14 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'abp-card',
-  template: ` <div class="card" [class]="cardClass" [style]="cardStyle">
+  template: ` <div class="card" [class]="cardClass()" [style]="cardStyle()">
     <ng-content></ng-content>
   </div>`,
   imports: [],
 })
 export class CardComponent {
-  @Input() cardClass: string;
+  readonly cardClass = input<string>(undefined);
 
-  @Input() cardStyle: string;
+  readonly cardStyle = input<string>(undefined);
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
index 8da578f9a7..850aaf5d01 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output, input } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
@@ -9,15 +9,15 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
       <input
         type="checkbox"
         [(ngModel)]="value"
-        [id]="checkboxId"
-        [readonly]="checkboxReadonly"
-        [class]="checkboxClass"
-        [style]="checkboxStyle"
+        [id]="checkboxId()"
+        [readonly]="checkboxReadonly()"
+        [class]="checkboxClass()"
+        [style]="checkboxStyle()"
         (blur)="checkboxBlur.next()"
         (focus)="checkboxFocus.next()"
       />
       @if (label) {
-        <label [class]="labelClass" [for]="checkboxId">
+        <label [class]="labelClass()" [for]="checkboxId()">
           {{ label | abpLocalization }}
         </label>
       }
@@ -34,16 +34,13 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 })
 export class FormCheckboxComponent extends AbstractNgModelComponent {
   @Input() label?: string;
-  @Input() labelClass = 'form-check-label';
-  @Input() checkboxId!: string;
-  @Input() checkboxStyle:
-    | {
-      [klass: string]: any;
-    }
-    | null
-    | undefined;
-  @Input() checkboxClass = 'form-check-input';
-  @Input() checkboxReadonly = false;
+  readonly labelClass = input('form-check-label');
+  readonly checkboxId = input.required<string>();
+  readonly checkboxStyle = input<{
+    [klass: string]: any;
+} | null | undefined>(undefined);
+  readonly checkboxClass = input('form-check-input');
+  readonly checkboxReadonly = input(false);
   @Output() checkboxBlur = new EventEmitter<void>();
   @Output() checkboxFocus = new EventEmitter<void>();
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
index 9e1b843755..46bc10fa53 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Input, Output, input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
@@ -7,17 +7,17 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
   template: `
     <div class="mb-3">
       @if (label) {
-        <label [class]="labelClass" [for]="inputId">
+        <label [class]="labelClass()" [for]="inputId()">
           {{ label | abpLocalization }}
         </label>
       }
       <input
         type="text"
-        [id]="inputId"
-        [placeholder]="inputPlaceholder"
-        [readonly]="inputReadonly"
-        [class]="inputClass"
-        [style]="inputStyle"
+        [id]="inputId()"
+        [placeholder]="inputPlaceholder()"
+        [readonly]="inputReadonly()"
+        [class]="inputClass()"
+        [style]="inputStyle()"
         (blur)="formBlur.next()"
         (focus)="formFocus.next()"
         [(ngModel)]="value"
@@ -34,18 +34,15 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
   imports: [LocalizationPipe, FormsModule],
 })
 export class FormInputComponent extends AbstractNgModelComponent {
-  @Input() inputId!: string;
-  @Input() inputReadonly = false;
+  readonly inputId = input.required<string>();
+  readonly inputReadonly = input(false);
   @Input() label = '';
-  @Input() labelClass = 'form-label';
-  @Input() inputPlaceholder = '';
-  @Input() inputStyle:
-    | {
-      [klass: string]: any;
-    }
-    | null
-    | undefined;
-  @Input() inputClass = 'form-control';
+  readonly labelClass = input('form-label');
+  readonly inputPlaceholder = input('');
+  readonly inputStyle = input<{
+    [klass: string]: any;
+} | null | undefined>(undefined);
+  readonly inputClass = input('form-control');
   @Output() formBlur = new EventEmitter<void>();
   @Output() formFocus = new EventEmitter<void>();
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
index 28955596a5..d4ed4de9dd 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
@@ -1,17 +1,17 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { combineLatest, Subscription, timer } from 'rxjs';
 import { HttpWaitService, RouterWaitService, SubscriptionService } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-loader-bar',
   template: `
-    <div id="abp-loader-bar" [class]="containerClass" [class.is-loading]="isLoading">
+    <div id="abp-loader-bar" [class]="containerClass()" [class.is-loading]="isLoading">
       <div
         class="abp-progress"
         [class.progressing]="progressLevel"
         [style.width.vw]="progressLevel"
         [style]="{
-          'background-color': color,
+          'background-color': color(),
           'box-shadow': boxShadow,
         }"
       ></div>
@@ -38,11 +38,9 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
     return this._isLoading;
   }
 
-  @Input()
-  containerClass = 'abp-loader-bar';
+  readonly containerClass = input('abp-loader-bar');
 
-  @Input()
-  color = '#77b6ff';
+  readonly color = input('#77b6ff');
 
   progressLevel = 0;
 
@@ -73,7 +71,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   };
 
   get boxShadow(): string {
-    return `0 0 10px rgba(${this.color}, 0.5)`;
+    return `0 0 10px rgba(${this.color()}, 0.5)`;
   }
 
   ngOnInit() {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
index 0200a82a59..cc53c815b0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.html
@@ -2,7 +2,7 @@
   <input
     [type]="fieldTextType ? 'text' : 'password'"
     class="form-control"
-    [id]="inputId"
+    [id]="inputId()"
     [(ngModel)]="value"
   />
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
index 24dffcbce0..bd03b25b56 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/password/password.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core';
+import { Component, forwardRef, input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { AbstractNgModelComponent } from '@abp/ng.core';
@@ -21,8 +21,8 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
   ],
 })
 export class PasswordComponent extends AbstractNgModelComponent {
-  @Input() inputId!: string;
-  @Input() formControlName!: string;
+  readonly inputId = input.required<string>();
+  readonly formControlName = input.required<string>();
   fieldTextType?: boolean;
 
   toggleFieldTextType() {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
index 70fdaa5ebd..0a70984b37 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.html
@@ -1,9 +1,9 @@
 <div
   class="abp-toast-container"
-  [style.top]="top || 'auto'"
+  [style.top]="top() || 'auto'"
   [style.right]="right || 'auto'"
-  [style.bottom]="bottom || 'auto'"
-  [style.left]="left || 'auto'"
+  [style.bottom]="bottom() || 'auto'"
+  [style.left]="left() || 'auto'"
   [style.display]="toasts.length ? 'flex' : 'none'"
   [@toastInOut]="toasts.length"
 >
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts
index 9c884cb937..7d9b2eddf8 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, Input, OnInit } from '@angular/core';
+import { Component, HostListener, Input, OnInit, input } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { toastInOut } from '../../animations/toast.animations';
 import { Toaster } from '../../models/toaster';
@@ -18,29 +18,25 @@ export class ToastContainerComponent implements OnInit {
 
   toasts = [] as Toaster.Toast[];
 
-  @Input()
-  top?: string;
+  readonly top = input<string>(undefined);
 
   @Input()
   right = '30px';
   defaultRight = '30px';
   defaultMobileRight = '0';
 
-  @Input()
-  bottom = '30px';
+  readonly bottom = input('30px');
 
-  @Input()
-  left?: string;
+  readonly left = input<string>(undefined);
 
-  @Input()
-  toastKey?: string;
+  readonly toastKey = input<string>(undefined);
 
   ngOnInit() {
     this.setDefaultRight();
     this.toasts$.subscribe(toasts => {
-      this.toasts = this.toastKey
+      this.toasts = this.toastKey()
         ? toasts.filter(t => {
-            return t.options && t.options.containerKey !== this.toastKey;
+            return t.options && t.options.containerKey !== this.toastKey();
           })
         : toasts;
     });
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
index ead9a95368..7d27398d88 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
@@ -3,15 +3,15 @@
     <i class="bi icon" [class]="iconClass" aria-hidden="true"></i>
   </div>
   <div class="abp-toast-content">
-    @if (toast.options?.closable) {
+    @if (toast().options?.closable) {
     <button class="abp-toast-close-button" (click)="close()">
       <i class="bi bi-x fs-4" aria-hidden="true"></i>
     </button>
     }
     <div class="abp-toast-title">
-      {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}
+      {{ toast().title | abpLocalization: toast().options?.titleLocalizationParams }}
     </div>
     <p class="abp-toast-message"
-      [innerHTML]="toast.message | abpLocalization: toast.options?.messageLocalizationParams"></p>
+      [innerHTML]="toast().message | abpLocalization: toast().options?.messageLocalizationParams"></p>
   </div>
 </div>
\ No newline at end of file
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
index c3fb4d251e..86fcd681ec 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, input } from '@angular/core';
 import { Toaster } from '../../models/toaster';
 import { LocalizationPipe } from '@abp/ng.core';
 
@@ -9,24 +9,24 @@ import { LocalizationPipe } from '@abp/ng.core';
   imports: [LocalizationPipe],
 })
 export class ToastComponent implements OnInit {
-  @Input()
-  toast!: Toaster.Toast;
+  readonly toast = input.required<Toaster.Toast>();
 
   @Output() remove = new EventEmitter<number>();
 
   get severityClass(): string {
-    if (!this.toast || !this.toast.severity) return '';
-    return `abp-toast-${this.toast.severity}`;
+    const toast = this.toast();
+    if (!toast || !toast.severity) return '';
+    return `abp-toast-${toast.severity}`;
   }
 
   get iconClass(): string {
-    const { iconClass } = this.toast.options || {};
+    const { iconClass } = this.toast().options || {};
 
     if (iconClass) {
       return iconClass;
     }
 
-    switch (this.toast.severity) {
+    switch (this.toast().severity) {
       case 'success':
         return 'bi-check';
       case 'info':
@@ -41,7 +41,7 @@ export class ToastComponent implements OnInit {
   }
 
   ngOnInit() {
-    const { sticky, life } = this.toast.options || {};
+    const { sticky, life } = this.toast().options || {};
 
     if (sticky) return;
     const timeout = life || 5000;
@@ -51,10 +51,10 @@ export class ToastComponent implements OnInit {
   }
 
   close() {
-    this.remove.emit(this.toast.options?.id);
+    this.remove.emit(this.toast().options?.id);
   }
 
   tap() {
-    if (this.toast.options?.tapToDismiss) this.close();
+    if (this.toast().options?.tapToDismiss) this.close();
   }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/disabled.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/disabled.directive.ts
index e00d827ba7..c8efa59b4a 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/disabled.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/disabled.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Input, OnChanges, SimpleChanges, inject } from '@angular/core';
+import { Directive, OnChanges, SimpleChanges, inject, input } from '@angular/core';
 import { NgControl } from '@angular/forms';
 
 @Directive({
@@ -7,8 +7,7 @@ import { NgControl } from '@angular/forms';
 export class DisabledDirective implements OnChanges {
   private ngControl = inject(NgControl, { host: true });
 
-  @Input()
-  abpDisabled = false;
+  readonly abpDisabled = input(false);
 
   // Related issue: https://github.com/angular/angular/issues/35330
   ngOnChanges({ abpDisabled }: SimpleChanges) {
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 b26be01a34..7ed5efe42b 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,11 +1,12 @@
-import { 
-  AfterViewInit, 
-  ChangeDetectorRef, 
-  Directive, 
-  ElementRef, 
-  HostBinding, 
-  Input, 
-  inject 
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  HostBinding,
+  Input,
+  inject,
+  input
 } from '@angular/core';
 
 @Directive({
@@ -15,29 +16,28 @@ export class EllipsisDirective implements AfterViewInit {
   private cdRef = inject(ChangeDetectorRef);
   private elRef = inject(ElementRef);
 
-  @Input('abpEllipsis')
-  width?: string;
+  readonly width = input<string>(undefined, { alias: "abpEllipsis" });
 
   @HostBinding('title')
   @Input()
   title?: string;
 
-  @Input('abpEllipsisEnabled')
-  enabled = true;
+  readonly enabled = input(true, { alias: "abpEllipsisEnabled" });
 
   @HostBinding('class.abp-ellipsis-inline')
   get inlineClass() {
-    return this.enabled && this.width;
+    return this.enabled() && this.width();
   }
 
   @HostBinding('class.abp-ellipsis')
   get class() {
-    return this.enabled && !this.width;
+    return this.enabled() && !this.width();
   }
 
   @HostBinding('style.max-width')
   get maxWidth() {
-    return this.enabled && this.width ? this.width || '170px' : undefined;
+    const width = this.width();
+    return this.enabled() && width ? width || '170px' : undefined;
   }
 
   ngAfterViewInit() {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts
index 2ac03dcc19..e2833441b1 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/loading.directive.ts
@@ -1,16 +1,17 @@
-import { 
-  ComponentFactoryResolver, 
-  ComponentRef, 
-  Directive, 
-  ElementRef, 
-  EmbeddedViewRef, 
-  HostBinding, 
-  Injector, 
-  Input, 
-  OnDestroy, 
-  OnInit, 
-  Renderer2, 
-  inject 
+import {
+  ComponentFactoryResolver,
+  ComponentRef,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  HostBinding,
+  Injector,
+  Input,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  inject,
+  input
 } from '@angular/core';
 import { Subscription, timer } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -49,7 +50,7 @@ export class LoadingDirective implements OnInit, OnDestroy {
         return;
       }
 
-      this.timerSubscription = timer(this.delay)
+      this.timerSubscription = timer(this.delay())
         .pipe(take(1))
         .subscribe(() => {
           if (!this.componentRef) {
@@ -75,8 +76,7 @@ export class LoadingDirective implements OnInit, OnDestroy {
   @Input('abpLoadingTargetElement')
   targetElement: HTMLElement | undefined;
 
-  @Input('abpLoadingDelay')
-  delay = 0;
+  readonly delay = input(0, { alias: "abpLoadingDelay" });
 
   componentRef!: ComponentRef<LoadingComponent>;
   rootNode: HTMLDivElement | null = null;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts
index 951de1a6f2..a773bf5dab 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-default.directive.ts
@@ -3,10 +3,10 @@ import {
   AfterViewInit,
   Directive,
   HostBinding,
-  Input,
   OnDestroy,
   inject,
   PLATFORM_ID,
+  input
 } from '@angular/core';
 import { ColumnMode, DatatableComponent } from '@swimlane/ngx-datatable';
 import { fromEvent, Subscription } from 'rxjs';
@@ -25,11 +25,11 @@ export class NgxDatatableDefaultDirective implements AfterViewInit, OnDestroy {
   private subscription = new Subscription();
   private resizeDiff = 0;
 
-  @Input() class = 'material bordered';
+  readonly class = input('material bordered');
 
   @HostBinding('class')
   get classes(): string {
-    return `ngx-datatable ${this.class}`;
+    return `ngx-datatable ${this.class()}`;
   }
 
   constructor() {
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts
index 0754300b0f..7b66905308 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts
@@ -1,7 +1,6 @@
 import {
   ChangeDetectorRef,
   Directive,
-  Input,
   OnChanges,
   OnInit,
   DoCheck,
@@ -10,6 +9,7 @@ import {
   DestroyRef,
   ViewContainerRef,
   Renderer2,
+  input
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { distinctUntilChanged } from 'rxjs';
@@ -35,7 +35,7 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
   protected readonly viewContainerRef = inject(ViewContainerRef);
   protected readonly renderer = inject(Renderer2);
 
-  @Input() list!: ListService;
+  readonly list = input.required<ListService>();
 
   constructor() {
     this.setInitialValues();
@@ -62,7 +62,7 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
   }
 
   protected subscribeToRequestStatus() {
-    const requestStatus$ = this.list.requestStatus$.pipe(distinctUntilChanged());
+    const requestStatus$ = this.list().requestStatus$.pipe(distinctUntilChanged());
     const { emptyMessage, errorMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
 
     requestStatus$.subscribe(status => {
@@ -137,14 +137,15 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
     this.table.sort
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(({ sorts: [{ prop, dir }] }) => {
-        if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
-          this.list.sortKey = '';
-          this.list.sortOrder = '';
+        const list = this.list();
+        if (prop === list.sortKey && list.sortOrder === 'desc') {
+          list.sortKey = '';
+          list.sortOrder = '';
           this.table.sorts = [];
           this.cdRef.detectChanges();
         } else {
-          this.list.sortKey = prop;
-          this.list.sortOrder = dir;
+          list.sortKey = prop;
+          list.sortOrder = dir;
         }
       });
   }
@@ -156,32 +157,32 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
   }
 
   protected subscribeToQuery() {
-    this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      const offset = this.list.page;
+    this.list().query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+      const offset = this.list().page;
       if (this.table.offset !== offset) this.table.offset = offset;
     });
   }
 
   protected setTablePage(pageNum: number) {
-    this.list.page = pageNum;
+    this.list().page = pageNum;
     this.table.offset = pageNum;
   }
 
   protected refreshPageIfDataExist() {
     if (this.table.rows?.length < 1 && this.table.count > 0) {
-      let maxPage = Math.floor(Number(this.table.count / this.list.maxResultCount));
+      let maxPage = Math.floor(Number(this.table.count / this.list().maxResultCount));
 
-      if (this.table.count < this.list.maxResultCount) {
+      if (this.table.count < this.list().maxResultCount) {
         this.setTablePage(0);
         return;
       }
 
-      if (this.table.count % this.list.maxResultCount === 0) {
+      if (this.table.count % this.list().maxResultCount === 0) {
         maxPage -= 1;
       }
 
-      if (this.list.page < maxPage) {
-        this.setTablePage(this.list.page);
+      if (this.list().page < maxPage) {
+        this.setTablePage(this.list().page);
         return;
       }