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 01/10] 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;
       }
 

From 7686d1b2ab7bc3d6e6db036f136ce8f284c7dd3a Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Sat, 31 Jan 2026 12:32:03 +0300
Subject: [PATCH 02/10] Refactor AbpVisibleDirective to use signal inputs

Replaces @Input with Angular's new signal-based input and effect for reactive updates. Simplifies lifecycle management by removing OnInit and handling input changes via effect, improving code clarity and reactivity.
---
 .../src/lib/directives/visible.directive.ts   | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts
index 7532041462..0f5e428aa0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts
@@ -1,37 +1,41 @@
-import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef, inject } from '@angular/core';
+import { Directive, OnDestroy, ViewContainerRef, TemplateRef, inject, input, effect } from '@angular/core';
 import { EMPTY, from, Observable, of, Subscription } from 'rxjs';
 
+type VisibleInput = boolean | Promise<boolean> | Observable<boolean> | undefined | null;
+
 @Directive({
   selector: '[abpVisible]',
 })
-export class AbpVisibleDirective implements OnDestroy, OnInit {
+export class AbpVisibleDirective implements OnDestroy {
   private viewContainerRef = inject(ViewContainerRef);
   private templateRef = inject<TemplateRef<unknown>>(TemplateRef);
 
-  conditionSubscription: Subscription | undefined;
-  isVisible: boolean | undefined;
+  private conditionSubscription: Subscription | undefined;
+  private isVisible: boolean | undefined;
+  private condition$: Observable<boolean> = of(false);
 
-  @Input() set abpVisible(
-    value: boolean | Promise<boolean> | Observable<boolean> | undefined | null,
-  ) {
-    this.condition$ = checkType(value);
-    this.subscribeToCondition();
-  }
+  readonly abpVisible = input<VisibleInput>();
 
-  private condition$: Observable<boolean> = of(false);
-  ngOnInit(): void {
-    this.updateVisibility();
+  constructor() {
+    effect(() => {
+      const value = this.abpVisible();
+      this.condition$ = checkType(value);
+      this.subscribeToCondition();
+    });
   }
+
   ngOnDestroy(): void {
     this.conditionSubscription?.unsubscribe();
   }
 
   private subscribeToCondition() {
+    this.conditionSubscription?.unsubscribe();
     this.conditionSubscription = this.condition$.subscribe(value => {
       this.isVisible = value;
       this.updateVisibility();
     });
   }
+
   private updateVisibility() {
     this.viewContainerRef.clear();
     // it should be false not falsy
@@ -42,7 +46,7 @@ export class AbpVisibleDirective implements OnDestroy, OnInit {
   }
 }
 
-function checkType(value: boolean | Promise<boolean> | Observable<boolean> | undefined | null) {
+function checkType(value: VisibleInput) {
   if (value instanceof Promise) {
     return from(value);
   } else if (value instanceof Observable) {

From d30914ba13d9b679567999acf40741bf35dbad4a Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Sat, 31 Jan 2026 12:36:51 +0300
Subject: [PATCH 03/10] Update loading.directive.ts

---
 .../src/lib/directives/loading.directive.ts   | 51 +++++++++----------
 1 file changed, 25 insertions(+), 26 deletions(-)

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 e2833441b1..2d1fbb0ddc 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,17 +1,16 @@
 import {
-  ComponentFactoryResolver,
   ComponentRef,
   Directive,
   ElementRef,
   EmbeddedViewRef,
-  HostBinding,
   Injector,
-  Input,
   OnDestroy,
   OnInit,
   Renderer2,
+  effect,
   inject,
-  input
+  input,
+  ViewContainerRef
 } from '@angular/core';
 import { Subscription, timer } from 'rxjs';
 import { take } from 'rxjs/operators';
@@ -19,29 +18,38 @@ import { LoadingComponent } from '../components';
 
 @Directive({
   selector: '[abpLoading]',
+  host: {
+    '[style.position]': '"relative"'
+  }
 })
 export class LoadingDirective implements OnInit, OnDestroy {
   private elRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private cdRes = inject(ComponentFactoryResolver);
   private injector = inject(Injector);
   private renderer = inject(Renderer2);
+  private viewContainerRef = inject(ViewContainerRef);
 
-  private _loading!: boolean;
+  readonly loading = input(false, { alias: 'abpLoading' });
+  readonly targetElementInput = input<HTMLElement | undefined>(undefined, { alias: 'abpLoadingTargetElement' });
+  readonly delay = input(0, { alias: 'abpLoadingDelay' });
 
-  @HostBinding('style.position')
-  position = 'relative';
+  private targetElement: HTMLElement | undefined;
 
-  @Input('abpLoading')
-  get loading(): boolean {
-    return this._loading;
+  componentRef: ComponentRef<LoadingComponent> | null = null;
+  rootNode: HTMLDivElement | null = null;
+  timerSubscription: Subscription | null = null;
+
+  constructor() {
+    effect(() => {
+      const newValue = this.loading();
+      this.handleLoadingChange(newValue);
+    });
   }
 
-  set loading(newValue: boolean) {
+  private handleLoadingChange(newValue: boolean) {
     setTimeout(() => {
       if (!newValue && this.timerSubscription) {
         this.timerSubscription.unsubscribe();
         this.timerSubscription = null;
-        this._loading = newValue;
 
         if (this.rootNode) {
           this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
@@ -54,9 +62,9 @@ export class LoadingDirective implements OnInit, OnDestroy {
         .pipe(take(1))
         .subscribe(() => {
           if (!this.componentRef) {
-            this.componentRef = this.cdRes
-              .resolveComponentFactory(LoadingComponent)
-              .create(this.injector);
+            this.componentRef = this.viewContainerRef.createComponent(LoadingComponent, {
+              injector: this.injector
+            });
           }
 
           if (newValue && !this.rootNode) {
@@ -67,22 +75,13 @@ export class LoadingDirective implements OnInit, OnDestroy {
             this.rootNode = null;
           }
 
-          this._loading = newValue;
           this.timerSubscription = null;
         });
     }, 0);
   }
 
-  @Input('abpLoadingTargetElement')
-  targetElement: HTMLElement | undefined;
-
-  readonly delay = input(0, { alias: "abpLoadingDelay" });
-
-  componentRef!: ComponentRef<LoadingComponent>;
-  rootNode: HTMLDivElement | null = null;
-  timerSubscription: Subscription | null = null;
-
   ngOnInit() {
+    this.targetElement = this.targetElementInput();
     if (!this.targetElement) {
       const { offsetHeight, offsetWidth } = this.elRef.nativeElement;
       if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children?.length) {

From d446a297fd4e0dc31b65aa49f5e5a5127d314b35 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Sat, 31 Jan 2026 12:37:57 +0300
Subject: [PATCH 04/10] Refactor EllipsisDirective to use signals and computed

Replaces HostBinding and getter methods with Angular signals and computed properties for class, style, and title bindings. Improves reactivity and code clarity by leveraging Angular's new reactive primitives.
---
 .../src/lib/directives/ellipsis.directive.ts  | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

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();
+    }
   }
 }

From 743d660069171e7a24e553c92932a1600e2b1b27 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Sat, 31 Jan 2026 12:56:12 +0300
Subject: [PATCH 05/10] Refactor components to use Angular signals and input()
 API

Migrates multiple components and directives to use Angular's new input() and signal() APIs, replacing legacy @Input and @Output decorators. Updates templates to use signal-based accessors, improves reactivity with effect(), and modernizes event emitters with output(). This refactor enhances type safety, consistency, and future-proofs the codebase for upcoming Angular versions.
---
 .../components/page/src/page.component.html   | 10 +--
 .../components/page/src/page.component.ts     | 34 ++++-----
 .../src/lib/abstracts/ng-model.component.ts   |  8 +--
 .../src/lib/directives/autofocus.directive.ts | 15 +---
 .../lib/directives/show-password.directive.ts | 15 ++--
 .../directives/free-text-input.directive.ts   | 32 +++++----
 .../breadcrumb-items.component.html           |  4 +-
 .../breadcrumb-items.component.ts             |  4 +-
 .../lib/components/button/button.component.ts | 71 ++++++++++---------
 .../components/checkbox/checkbox.component.ts | 20 +++---
 .../form-input/form-input.component.ts        | 20 +++---
 .../loader-bar/loader-bar.component.ts        | 37 +++++-----
 .../toast-container.component.html            |  2 +-
 .../toast-container.component.ts              | 31 ++++----
 14 files changed, 150 insertions(+), 153 deletions(-)

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 8cbaf2fdda..45e22c5e37 100644
--- a/npm/ng-packs/packages/components/page/src/page.component.html
+++ b/npm/ng-packs/packages/components/page/src/page.component.html
@@ -3,10 +3,10 @@
     @if (customTitle) {
       <ng-content select="abp-page-title-container"></ng-content>
     } @else {
-      @if (title) {
+      @if (title()) {
         <div class="col-auto" *abpPagePart="pageParts.title">
           <h1 class="content-header-title">
-            {{ title }}
+            {{ title() }}
           </h1>
         </div>
       }
@@ -25,9 +25,9 @@
     @if (customToolbar) {
       <ng-content select="abp-page-toolbar-container"></ng-content>
     } @else {
-      @if (toolbarVisible) {
-        <div class="col" *abpPagePart="pageParts.toolbar; context: toolbarData">
-          <abp-page-toolbar [record]="toolbarData"></abp-page-toolbar>
+      @if (toolbarVisible()) {
+        <div class="col" *abpPagePart="pageParts.toolbar; context: toolbarData()">
+          <abp-page-toolbar [record]="toolbarData()"></abp-page-toolbar>
         </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 3ee5b7c2db..4c9e35a2b7 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, input } from '@angular/core';
+import { Component, ViewEncapsulation, ContentChild, input, effect, signal } from '@angular/core';
 import {
   PageTitleContainerComponent,
   PageBreadcrumbContainerComponent,
@@ -16,21 +16,13 @@ import { PagePartDirective } from './page-part.directive';
   imports: [BreadcrumbComponent, PageToolbarComponent, PagePartDirective],
 })
 export class PageComponent {
-  @Input() title?: string;
-
-  toolbarVisible = false;
-  _toolbarData: any;
-  @Input() set toolbar(val: any) {
-    this._toolbarData = val;
-    this.toolbarVisible = true;
-  }
-
-  get toolbarData() {
-    return this._toolbarData;
-  }
-
+  readonly title = input<string | undefined>(undefined);
+  readonly toolbarInput = input<any>(undefined, { alias: 'toolbar' });
   readonly breadcrumb = input(true);
 
+  protected readonly toolbarVisible = signal(false);
+  protected readonly toolbarData = signal<any>(undefined);
+
   pageParts = {
     title: PageParts.title,
     breadcrumb: PageParts.breadcrumb,
@@ -42,10 +34,20 @@ export class PageComponent {
   customBreadcrumb?: PageBreadcrumbContainerComponent;
   @ContentChild(PageToolbarContainerComponent) customToolbar?: PageToolbarContainerComponent;
 
+  constructor() {
+    effect(() => {
+      const toolbar = this.toolbarInput();
+      if (toolbar !== undefined) {
+        this.toolbarData.set(toolbar);
+        this.toolbarVisible.set(true);
+      }
+    });
+  }
+
   get shouldRenderRow() {
     return !!(
-      this.title ||
-      this.toolbarVisible ||
+      this.title() ||
+      this.toolbarVisible() ||
       this.breadcrumb() ||
       this.customTitle ||
       this.customBreadcrumb ||
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 6f313d513b..889143c9ed 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, input } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, input } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 // Not an abstract class on purpose. Do not change!
@@ -11,16 +11,16 @@ export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAcc
   onChange?: (value: T) => void;
   onTouched?: () => void;
 
-  @Input()
+  // Note: disabled needs to remain as a regular property because setDisabledState assigns to it
   disabled?: boolean;
 
-  readonly readonly = input<boolean>(undefined);
+  readonly readonly = input<boolean | undefined>(undefined);
 
   readonly valueFn = input<(value: U, previousValue?: T) => T>(value => value as any as T);
 
   readonly valueLimitFn = input<(value: T, previousValue?: T) => any>(value => false);
 
-  @Input()
+  // Note: value needs getter/setter for ControlValueAccessor and two-way binding
   set value(value: T) {
     value = this.valueFn()(value as any as U, this._value);
 
diff --git a/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts
index 398eaef9cc..65be9c348a 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Directive, ElementRef, Input, inject } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, inject, input, numberAttribute } from '@angular/core';
 
 @Directive({
   selector: '[autofocus]',
@@ -6,18 +6,9 @@ import { AfterViewInit, Directive, ElementRef, Input, inject } from '@angular/co
 export class AutofocusDirective implements AfterViewInit {
   private elRef = inject(ElementRef);
 
-  private _delay = 0;
-
-  @Input('autofocus')
-  set delay(val: number | string | undefined) {
-    this._delay = Number(val) || 0;
-  }
-
-  get delay() {
-    return this._delay;
-  }
+  readonly delay = input(0, { alias: 'autofocus', transform: numberAttribute });
 
   ngAfterViewInit(): void {
-    setTimeout(() => this.elRef.nativeElement.focus(), this.delay as number);
+    setTimeout(() => this.elRef.nativeElement.focus(), this.delay());
   }
 }
diff --git a/npm/ng-packs/packages/core/src/lib/directives/show-password.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/show-password.directive.ts
index a8d8addd6c..367f483b21 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/show-password.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/show-password.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Input, inject } from '@angular/core';
+import { Directive, ElementRef, effect, inject, input } from '@angular/core';
 
 @Directive({
   selector: '[abpShowPassword]',
@@ -6,10 +6,15 @@ import { Directive, ElementRef, Input, inject } from '@angular/core';
 export class ShowPasswordDirective {
   protected readonly elementRef = inject(ElementRef);
 
-  @Input() set abpShowPassword(visible: boolean) {
-    const element = this.elementRef.nativeElement as HTMLInputElement;
-    if (!element) return;
+  readonly abpShowPassword = input(false);
 
-    element.type = visible ? 'text' : 'password';
+  constructor() {
+    effect(() => {
+      const visible = this.abpShowPassword();
+      const element = this.elementRef.nativeElement as HTMLInputElement;
+      if (!element) return;
+
+      element.type = visible ? 'text' : 'password';
+    });
   }
 }
diff --git a/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts b/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
index 6b6556dcfa..259d2f76a1 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Directive, effect, inject, input, signal, ElementRef, Renderer2 } from '@angular/core';
 
 // TODO: improve this type
 export interface FreeTextType {
@@ -9,7 +9,7 @@ export interface FreeTextType {
   };
 }
 
-export const INPUT_TYPES = {
+export const INPUT_TYPES: Record<string, string> = {
   numeric: 'number',
   default: 'text',
 };
@@ -19,21 +19,23 @@ export const INPUT_TYPES = {
   exportAs: 'inputAbpFeatureManagementFreeText',
 })
 export class FreeTextInputDirective {
-  _feature: FreeTextType;
-  // eslint-disable-next-line @angular-eslint/no-input-rename
-  @Input('abpFeatureManagementFreeText') set feature(val: FreeTextType) {
-    this._feature = val;
-    this.setInputType();
-  }
+  private readonly elRef = inject(ElementRef);
+  private readonly renderer = inject(Renderer2);
 
-  get feature() {
-    return this._feature;
-  }
+  readonly feature = input<FreeTextType | undefined>(undefined, { alias: 'abpFeatureManagementFreeText' });
 
-  @HostBinding('type') type: string;
+  constructor() {
+    effect(() => {
+      const feature = this.feature();
+      if (feature) {
+        this.setInputType(feature);
+      }
+    });
+  }
 
-  private setInputType() {
-    const validatorType = this.feature?.valueType?.validator?.name.toLowerCase();
-    this.type = INPUT_TYPES[validatorType] ?? INPUT_TYPES.default;
+  private setInputType(feature: FreeTextType) {
+    const validatorType = feature?.valueType?.validator?.name?.toLowerCase();
+    const type = INPUT_TYPES[validatorType] ?? INPUT_TYPES['default'];
+    this.renderer.setAttribute(this.elRef.nativeElement, 'type', type);
   }
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
index 4b2dbf611d..4480e34c96 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.html
@@ -1,9 +1,9 @@
-@if (items.length) {
+@if (items().length) {
   <ol class="breadcrumb">
     <li class="breadcrumb-item">
       <a routerLink="/"><i class="fa fa-home" aria-hidden="true"></i> </a>
     </li>
-    @for (item of items; track $index; let last = $last) {
+    @for (item of items(); track $index; let last = $last) {
       <li class="breadcrumb-item" [class.active]="last" aria-current="page">
         <ng-container
           *ngTemplateOutlet="item.path ? linkTemplate : textTemplate; context: { $implicit: item }"
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts
index a5a1a4d112..af0eebfa7b 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/breadcrumb-items/breadcrumb-items.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink } from '@angular/router';
 import { ABP, LocalizationPipe } from '@abp/ng.core';
@@ -9,5 +9,5 @@ import { ABP, LocalizationPipe } from '@abp/ng.core';
   imports: [NgTemplateOutlet, RouterLink, LocalizationPipe],
 })
 export class BreadcrumbItemsComponent {
-  @Input() items: Partial<ABP.Route>[] = [];
+  readonly items = input<Partial<ABP.Route>[]>([]);
 }
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 652b484085..52da336999 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
@@ -2,14 +2,15 @@
 import {
   Component,
   ElementRef,
-  EventEmitter,
-  Input,
   OnInit,
-  Output,
   Renderer2,
   ViewChild,
+  effect,
   inject,
-  input
+  input,
+  output,
+  signal,
+  computed
 } from '@angular/core';
 import { ABP, StopPropagationDirective } from '@abp/ng.core';
 
@@ -22,12 +23,12 @@ import { ABP, StopPropagationDirective } from '@abp/ng.core';
       [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)"
+      [disabled]="isLoading() || disabled()"
+      (click.stop)="click.emit($event); abpClick.emit($event)"
+      (focus)="focus.emit($event); abpFocus.emit($event)"
+      (blur)="blur.emit($event); abpBlur.emit($event)"
     >
-      <i [class]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
+      <i [class]="icon()" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
   imports: [StopPropagationDirective],
@@ -36,48 +37,48 @@ export class ButtonComponent implements OnInit {
   private renderer = inject(Renderer2);
 
   readonly buttonId = input('');
-
   readonly buttonClass = input('btn btn-primary');
-
   readonly buttonType = input('button');
-
-  readonly formName = input<string>(undefined);
-
-  readonly iconClass = input<string>(undefined);
-
-  @Input()
-  loading = false;
-
+  readonly formName = input<string | undefined>(undefined);
+  readonly iconClass = input<string | undefined>(undefined);
+  readonly loadingInput = input(false, { alias: 'loading' });
   readonly disabled = input<boolean | undefined>(false);
+  readonly attributes = input<ABP.Dictionary<string> | undefined>(undefined);
 
-  readonly attributes = input<ABP.Dictionary<string>>(undefined);
+  // Internal writable signal for loading state - can be set programmatically
+  private readonly _loading = signal(false);
 
-  @Output() readonly click = new EventEmitter<MouseEvent>();
+  // Computed that combines input and internal state
+  readonly isLoading = computed(() => this.loadingInput() || this._loading());
 
-  @Output() readonly focus = new EventEmitter<FocusEvent>();
-
-  @Output() readonly blur = new EventEmitter<FocusEvent>();
-
-  @Output() readonly abpClick = new EventEmitter<MouseEvent>();
-
-  @Output() readonly abpFocus = new EventEmitter<FocusEvent>();
+  // Getter/setter for backward compatibility (used by ModalComponent)
+  get loading(): boolean {
+    return this._loading();
+  }
+  set loading(value: boolean) {
+    this._loading.set(value);
+  }
 
-  @Output() readonly abpBlur = new EventEmitter<FocusEvent>();
+  readonly click = output<MouseEvent>();
+  readonly focus = output<FocusEvent>();
+  readonly blur = output<FocusEvent>();
+  readonly abpClick = output<MouseEvent>();
+  readonly abpFocus = output<FocusEvent>();
+  readonly abpBlur = output<FocusEvent>();
 
   @ViewChild('button', { static: true })
   buttonRef!: ElementRef<HTMLButtonElement>;
 
-  get icon(): string {
-    return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass() || 'd-none'}`;
-  }
+  protected readonly icon = computed(() => {
+    return this.isLoading() ? 'fa fa-spinner fa-spin' : this.iconClass() || 'd-none';
+  });
 
   ngOnInit() {
     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]);
+        if (attributes[key]) {
+          this.renderer.setAttribute(this.buttonRef.nativeElement, key, attributes[key]);
         }
       });
     }
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 850aaf5d01..22636f0af9 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, input } from '@angular/core';
+import { Component, forwardRef, input, output } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
@@ -13,12 +13,12 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [readonly]="checkboxReadonly()"
         [class]="checkboxClass()"
         [style]="checkboxStyle()"
-        (blur)="checkboxBlur.next()"
-        (focus)="checkboxFocus.next()"
+        (blur)="checkboxBlur.emit()"
+        (focus)="checkboxFocus.emit()"
       />
-      @if (label) {
+      @if (label()) {
         <label [class]="labelClass()" [for]="checkboxId()">
-          {{ label | abpLocalization }}
+          {{ label() | abpLocalization }}
         </label>
       }
     </div>
@@ -33,14 +33,12 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
   imports: [FormsModule, LocalizationPipe],
 })
 export class FormCheckboxComponent extends AbstractNgModelComponent {
-  @Input() label?: string;
+  readonly label = input<string | undefined>(undefined);
   readonly labelClass = input('form-check-label');
   readonly checkboxId = input.required<string>();
-  readonly checkboxStyle = input<{
-    [klass: string]: any;
-} | null | undefined>(undefined);
+  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>();
+  readonly checkboxBlur = output<void>();
+  readonly checkboxFocus = output<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 46bc10fa53..9ea55fb144 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, input } from '@angular/core';
+import { Component, forwardRef, input, output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
@@ -6,9 +6,9 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
   selector: 'abp-form-input',
   template: `
     <div class="mb-3">
-      @if (label) {
+      @if (label()) {
         <label [class]="labelClass()" [for]="inputId()">
-          {{ label | abpLocalization }}
+          {{ label() | abpLocalization }}
         </label>
       }
       <input
@@ -18,8 +18,8 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [readonly]="inputReadonly()"
         [class]="inputClass()"
         [style]="inputStyle()"
-        (blur)="formBlur.next()"
-        (focus)="formFocus.next()"
+        (blur)="formBlur.emit()"
+        (focus)="formFocus.emit()"
         [(ngModel)]="value"
       />
     </div>
@@ -36,13 +36,11 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 export class FormInputComponent extends AbstractNgModelComponent {
   readonly inputId = input.required<string>();
   readonly inputReadonly = input(false);
-  @Input() label = '';
+  readonly label = input('');
   readonly labelClass = input('form-label');
   readonly inputPlaceholder = input('');
-  readonly inputStyle = input<{
-    [klass: string]: any;
-} | null | undefined>(undefined);
+  readonly inputStyle = input<{ [klass: string]: any } | null | undefined>(undefined);
   readonly inputClass = input('form-control');
-  @Output() formBlur = new EventEmitter<void>();
-  @Output() formFocus = new EventEmitter<void>();
+  readonly formBlur = output<void>();
+  readonly formFocus = output<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 d4ed4de9dd..efe34b2e78 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,11 +1,11 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit, inject, input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnDestroy, OnInit, inject, input, effect, signal } 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"
@@ -27,31 +27,26 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   private httpWaitService = inject(HttpWaitService);
   private routerWaitService = inject(RouterWaitService);
 
-  protected _isLoading!: boolean;
-
-  @Input()
-  set isLoading(value: boolean) {
-    this._isLoading = value;
-    this.cdRef.detectChanges();
-  }
-  get isLoading(): boolean {
-    return this._isLoading;
-  }
-
+  readonly isLoadingInput = input(false, { alias: 'isLoading' });
   readonly containerClass = input('abp-loader-bar');
-
   readonly color = input('#77b6ff');
 
-  progressLevel = 0;
+  protected readonly isLoading = signal(false);
 
+  progressLevel = 0;
   interval = new Subscription();
-
   timer = new Subscription();
-
   intervalPeriod = 350;
-
   stopDelay = 800;
 
+  constructor() {
+    effect(() => {
+      const value = this.isLoadingInput();
+      this.isLoading.set(value);
+      this.cdRef.detectChanges();
+    });
+  }
+
   private readonly clearProgress = () => {
     this.progressLevel = 0;
     this.cdRef.detectChanges();
@@ -93,9 +88,9 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
   }
 
   startLoading() {
-    if (this.isLoading || !this.interval.closed) return;
+    if (this.isLoading() || !this.interval.closed) return;
 
-    this.isLoading = true;
+    this.isLoading.set(true);
     this.progressLevel = 0;
     this.cdRef.detectChanges();
     this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
@@ -106,7 +101,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
     this.interval.unsubscribe();
 
     this.progressLevel = 100;
-    this.isLoading = false;
+    this.isLoading.set(false);
 
     if (!this.timer.closed) return;
 
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 0a70984b37..9969fd693f 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,7 +1,7 @@
 <div
   class="abp-toast-container"
   [style.top]="top() || 'auto'"
-  [style.right]="right || 'auto'"
+  [style.right]="right() || 'auto'"
   [style.bottom]="bottom() || 'auto'"
   [style.left]="left() || 'auto'"
   [style.display]="toasts.length ? 'flex' : 'none'"
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 7d9b2eddf8..11225f7b55 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, input } from '@angular/core';
+import { Component, OnInit, input, signal, effect } from '@angular/core';
 import { ReplaySubject } from 'rxjs';
 import { toastInOut } from '../../animations/toast.animations';
 import { Toaster } from '../../models/toaster';
@@ -10,6 +10,9 @@ import { ToastComponent } from '../toast/toast.component';
   styleUrls: ['./toast-container.component.scss'],
   animations: [toastInOut],
   imports: [ToastComponent],
+  host: {
+    '(window:resize)': 'onWindowResize()'
+  }
 })
 export class ToastContainerComponent implements OnInit {
   toasts$!: ReplaySubject<Toaster.Toast[]>;
@@ -18,18 +21,21 @@ export class ToastContainerComponent implements OnInit {
 
   toasts = [] as Toaster.Toast[];
 
-  readonly top = input<string>(undefined);
-
-  @Input()
-  right = '30px';
-  defaultRight = '30px';
-  defaultMobileRight = '0';
-
+  readonly top = input<string | undefined>(undefined);
+  readonly rightInput = input('30px', { alias: 'right' });
   readonly bottom = input('30px');
+  readonly left = input<string | undefined>(undefined);
+  readonly toastKey = input<string | undefined>(undefined);
 
-  readonly left = input<string>(undefined);
+  protected readonly right = signal('30px');
+  readonly defaultRight = '30px';
+  readonly defaultMobileRight = '0';
 
-  readonly toastKey = input<string>(undefined);
+  constructor() {
+    effect(() => {
+      this.right.set(this.rightInput());
+    });
+  }
 
   ngOnInit() {
     this.setDefaultRight();
@@ -42,15 +48,14 @@ export class ToastContainerComponent implements OnInit {
     });
   }
 
-  @HostListener('window:resize')
   onWindowResize() {
     this.setDefaultRight();
   }
 
   setDefaultRight() {
     const screenWidth = window.innerWidth;
-    if (screenWidth < 768 && this.right == this.defaultRight) {
-      this.right = this.defaultMobileRight;
+    if (screenWidth < 768 && this.right() === this.defaultRight) {
+      this.right.set(this.defaultMobileRight);
     }
   }
 

From cb1116a8e71704da942a9c4c367220bd654ca30d Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Sat, 31 Jan 2026 13:21:07 +0300
Subject: [PATCH 06/10] Refactor to use Angular signals and input() API

Refactors extensible form, table, and related components to use Angular's signal-based input() API instead of @Input and ngOnChanges. Updates internal state management to use signals and effects, improves type safety with ReadonlyPropData, and updates templates to use new signal-based accessors. Removes legacy OnChanges logic and adapts utility and directive code to the new reactive paradigm.
---
 .../extensible-form-prop.component.html       |  54 +++---
 .../extensible-form-prop.component.ts         | 108 ++++++-----
 .../extensible-form.component.html            |   4 +-
 .../extensible-form.component.ts              |  32 ++--
 .../extensible-table.component.html           |  18 +-
 .../extensible-table.component.ts             | 180 +++++++++---------
 .../grid-actions/grid-actions.component.ts    |   5 +-
 .../src/lib/directives/prop-data.directive.ts |  41 ++--
 .../extensible/src/lib/models/actions.ts      |   5 +-
 .../extensible/src/lib/models/props.ts        |  27 ++-
 .../src/lib/utils/form-props.util.ts          |  10 +-
 .../page/src/page-part.directive.ts           |  45 +++--
 12 files changed, 281 insertions(+), 248 deletions(-)

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 60af79b0ec..4daf6fb854 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
@@ -1,34 +1,34 @@
-<ng-container *abpPermission="prop.permission; runChangeDetection: false">
-  @switch (getComponent(prop)) {
+<ng-container *abpPermission="prop().permission; runChangeDetection: false">
+  @switch (getComponent(prop())) {
   @case ('template') {
-  <ng-container *ngComponentOutlet="prop.template; injector: injectorForCustomComponent" />
+  <ng-container *ngComponentOutlet="prop().template; injector: injectorForCustomComponent" />
   }
   }
 
   <div [class]="containerClassName" class="mb-2">
-    @switch (getComponent(prop)) {
+    @switch (getComponent(prop())) {
     @case ('input') {
     <ng-template [ngTemplateOutlet]="label" />
-    <input #field [id]="prop.id" [formControlName]="prop.name" [autocomplete]="prop.autocomplete" [type]="getType(prop)"
+    <input #field [id]="prop().id" [formControlName]="prop().name" [autocomplete]="prop().autocomplete" [type]="getType(prop())"
       [abpDisabled]="disabled" [readonly]="readonly" class="form-control" />
     }
     @case ('hidden') {
-    <input [formControlName]="prop.name" type="hidden" />
+    <input [formControlName]="prop().name" type="hidden" />
     }
     @case ('checkbox') {
     <div class="form-check" validationTarget>
-      <input #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" type="checkbox"
+      <input #field [id]="prop().id" [formControlName]="prop().name" [abpDisabled]="disabled" type="checkbox"
         class="form-check-input" />
       <ng-template [ngTemplateOutlet]="label" [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }" />
     </div>
     }
     @case ('select') {
     <ng-template [ngTemplateOutlet]="label" />
-    <select #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled"
+    <select #field [id]="prop().id" [formControlName]="prop().name" [abpDisabled]="disabled"
       class="form-select form-control">
       @for (option of options$ | async; track option.value) {
       <option [ngValue]="option.value">
-        @if (prop.isExtra) {
+        @if (prop().isExtra) {
         {{ '::' + option.key | abpLocalization }}
         } @else {
         {{ option.key }}
@@ -39,42 +39,42 @@
     }
     @case ('multiselect') {
     <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <abp-extensible-form-multi-select [prop]="prop" [options]="options$ | async" [formControlName]="prop.name"
+    <abp-extensible-form-multi-select [prop]="prop()" [options]="options$ | async" [formControlName]="prop().name"
       [abpDisabled]="disabled" />
     }
     @case ('typeahead') {
     <ng-template [ngTemplateOutlet]="label" />
     <div #typeahead class="position-relative" validationStyle validationTarget>
-      <input #field [id]="prop.id" [autocomplete]="prop.autocomplete" [abpDisabled]="disabled" [ngbTypeahead]="search"
+      <input #field [id]="prop().id" [autocomplete]="prop().autocomplete" [abpDisabled]="disabled" [ngbTypeahead]="search"
         [editable]="false" [inputFormatter]="typeaheadFormatter" [resultFormatter]="typeaheadFormatter"
         [ngModelOptions]="{ standalone: true }" [(ngModel)]="typeaheadModel"
         (selectItem)="setTypeaheadValue($event.item)" (blur)="setTypeaheadValue(typeaheadModel)"
         [class.is-invalid]="typeahead.classList.contains('is-invalid')" class="form-control" />
-      <input [formControlName]="prop.name" type="hidden" />
+      <input [formControlName]="prop().name" type="hidden" />
     </div>
     }
     @case ('date') {
     <ng-template [ngTemplateOutlet]="label" />
-    <input [id]="prop.id" [formControlName]="prop.name" (click)="datepicker.open()" (keyup.space)="datepicker.open()"
+    <input [id]="prop().id" [formControlName]="prop().name" (click)="datepicker.open()" (keyup.space)="datepicker.open()"
       ngbDatepicker #datepicker="ngbDatepicker" type="text" class="form-control" />
     }
     @case ('time') {
     <ng-template [ngTemplateOutlet]="label" />
-    <ngb-timepicker [formControlName]="prop.name" />
+    <ngb-timepicker [formControlName]="prop().name" />
     }
     @case ('dateTime') {
     <ng-template [ngTemplateOutlet]="label" />
-    <abp-extensible-date-time-picker [prop]="prop" [meridian]="meridian$ | async" />
+    <abp-extensible-date-time-picker [prop]="prop()" [meridian]="meridian$ | async" />
     }
     @case ('textarea') {
     <ng-template [ngTemplateOutlet]="label" />
-    <textarea #field [id]="prop.id" [formControlName]="prop.name" [abpDisabled]="disabled" [readonly]="readonly"
+    <textarea #field [id]="prop().id" [formControlName]="prop().name" [abpDisabled]="disabled" [readonly]="readonly"
       class="form-control"></textarea>
     }
     @case ('passwordinputgroup') {
     <ng-template [ngTemplateOutlet]="label" />
     <div class="input-group form-group" validationTarget>
-      <input class="form-control" [id]="prop.id" [formControlName]="prop.name" [abpShowPassword]="showPassword" />
+      <input class="form-control" [id]="prop().id" [formControlName]="prop().name" [abpShowPassword]="showPassword" />
       <button class="btn btn-secondary" type="button" (click)="showPassword = !showPassword">
         <i class="fa" aria-hidden="true" [class]="{
                 'fa-eye-slash': !showPassword,
@@ -85,27 +85,27 @@
     }
     }
 
-    @if (prop.formText) {
-    <small class="text-muted d-block">{{ prop.formText | abpLocalization }}</small>
+    @if (prop().formText) {
+    <small class="text-muted d-block">{{ prop().formText | abpLocalization }}</small>
     }
   </div>
 </ng-container>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [class]="classes || 'form-label d-inline-block'">
+  <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 }}
+      @if (prop().displayTextResolver) {
+      {{ prop().displayTextResolver(data()) | abpLocalization }}
       } @else {
-      @if (prop.isExtra) {
-      {{ '::' + prop.displayName | abpLocalization }}
+      @if (prop().isExtra) {
+      {{ '::' + prop().displayName | abpLocalization }}
       } @else {
-      {{ prop.displayName | abpLocalization }}
+      {{ prop().displayName | abpLocalization }}
       }
       }
       {{ asterisk }}
-      @if (prop.tooltip) {
-      <i [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"
+      @if (prop().tooltip) {
+      <i [ngbTooltip]="prop().tooltip.text | abpLocalization" [placement]="prop().tooltip.placement || 'auto'"
         container="body" class="bi bi-info-circle"></i>
       }
     </span>
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 b7745f3d48..65223b397e 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
@@ -14,13 +14,11 @@ import {
   ElementRef,
   inject,
   Injector,
-  Input,
   OnChanges,
   Optional,
   SimpleChanges,
   SkipSelf,
   ViewChild,
-  signal,
   effect,
   input
 } from '@angular/core';
@@ -43,7 +41,7 @@ import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { DateAdapter, DisabledDirective, TimeAdapter } from '@abp/ng.theme.shared';
 import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
 import { FormProp } from '../../models/form-props';
-import { PropData } from '../../models/props';
+import { PropData, ReadonlyPropData } from '../../models/props';
 import { selfFactory } from '../../utils/factory.util';
 import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
 import { eExtensibleComponents } from '../../enums/components';
@@ -74,7 +72,7 @@ import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-f
     NgComponentOutlet,
     NgTemplateOutlet,
     FormsModule
-],
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [ExtensibleFormPropService],
   viewProviders: [
@@ -87,7 +85,7 @@ import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-f
     { provide: NgbTimeAdapter, useClass: TimeAdapter },
   ],
 })
-export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
+export class ExtensibleFormPropComponent implements AfterViewInit {
   protected service = inject(ExtensibleFormPropService);
   public readonly cdRef = inject(ChangeDetectorRef);
   public readonly track = inject(TrackByService);
@@ -96,9 +94,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   private readonly form = this.#groupDirective.form;
 
   readonly data = input.required<PropData>();
-  @Input() prop!: FormProp;
-  readonly first = input<boolean>(undefined);
-  readonly isFirstGroup = input<boolean>(undefined);
+  readonly prop = input.required<FormProp>();
+  readonly first = input<boolean | undefined>(undefined);
+  readonly isFirstGroup = input<boolean | undefined>(undefined);
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
   injectorForCustomComponent?: Injector;
@@ -111,10 +109,55 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   typeaheadModel: any;
   passwordKey = eExtensibleComponents.PasswordComponent;
 
-  disabledFn = (data: PropData) => false;
+  disabledFn = (data: ReadonlyPropData) => false;
 
   get disabled() {
-    return this.disabledFn(this.data());
+    return this.disabledFn(this.data().data);
+  }
+
+  constructor() {
+    // Watch prop changes and update state
+    effect(() => {
+      const currentProp = this.prop();
+      if (!currentProp) return;
+      
+      const { options, readonly, disabled, validators, className, template } = currentProp;
+      
+      if (template) {
+        this.injectorForCustomComponent = Injector.create({
+          providers: [
+            {
+              provide: EXTENSIONS_FORM_PROP,
+              useValue: currentProp,
+            },
+            {
+              provide: EXTENSIONS_FORM_PROP_DATA,
+              useValue: this.data()?.data?.record,
+            },
+            { provide: ControlContainer, useExisting: FormGroupDirective },
+          ],
+          parent: this.injector,
+        });
+      }
+
+      if (options) this.options$ = options(this.data().data);
+      if (readonly) this.readonly = readonly(this.data().data);
+
+      if (disabled) {
+        this.disabledFn = disabled;
+      }
+      if (validators) {
+        this.validators = validators(this.data().data);
+        this.setAsterisk();
+      }
+      if (className !== undefined) {
+        this.containerClassName = className;
+      }
+
+      const [keyControl, valueControl] = this.getTypeaheadControls();
+      if (keyControl && valueControl)
+        this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
+    });
   }
 
   setTypeaheadValue(selectedOption: ABP.Option<string>) {
@@ -131,7 +174,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().data, text) || of([])),
         )
       : of([]);
 
@@ -140,12 +183,12 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   meridian$ = this.service.meridian$;
 
   get isInvalid() {
-    const control = this.form.get(this.prop.name);
+    const control = this.form.get(this.prop().name);
     return control?.touched && control.invalid;
   }
 
   private getTypeaheadControls() {
-    const { name } = this.prop;
+    const { name } = this.prop();
     const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
     const keyControl =
       this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
@@ -173,43 +216,4 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   getType(prop: FormProp): string {
     return this.service.getType(prop);
   }
-
-  ngOnChanges({ prop, data }: SimpleChanges) {
-    const currentProp = prop?.currentValue as FormProp;
-    const { options, readonly, disabled, validators, className, template } = currentProp || {};
-    if (template) {
-      this.injectorForCustomComponent = Injector.create({
-        providers: [
-          {
-            provide: EXTENSIONS_FORM_PROP,
-            useValue: currentProp,
-          },
-          {
-            provide: EXTENSIONS_FORM_PROP_DATA,
-            useValue: (data?.currentValue as PropData)?.record,
-          },
-          { provide: ControlContainer, useExisting: FormGroupDirective },
-        ],
-        parent: this.injector,
-      });
-    }
-
-    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.setAsterisk();
-    }
-    if (className !== undefined) {
-      this.containerClassName = className;
-    }
-
-    const [keyControl, valueControl] = this.getTypeaheadControls();
-    if (keyControl && valueControl)
-      this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
-  }
 }
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
index be937e21ca..cf715f2b27 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.html
@@ -1,6 +1,6 @@
 @if (form) {
-@for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {
-<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
+@for (groupedProp of groupedPropList()?.items; track i; let i = $index; let first = $first) {
+<ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record()">
   @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
   <div [class]="groupedProp.group?.className"
     [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className">
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
index 8b5829754d..d098814fa1 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form.component.ts
@@ -4,11 +4,13 @@ import {
   ChangeDetectorRef,
   Component,
   inject,
-  Input,
   Optional,
   QueryList,
   SkipSelf,
   ViewChildren,
+  input,
+  signal,
+  effect
 } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
@@ -44,18 +46,22 @@ export class ExtensibleFormComponent<R = any> {
   @ViewChildren(ExtensibleFormPropComponent)
   formProps!: QueryList<ExtensibleFormPropComponent>;
 
-  @Input()
-  set selectedRecord(record: R) {
-    const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
-    const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
-    this.groupedPropList = this.createGroupedList(propList);
-    this.record = record;
-  }
+  readonly selectedRecord = input<R | undefined>(undefined);
 
   extraPropertiesKey = EXTRA_PROPERTIES_KEY;
-  groupedPropList!: GroupedFormPropList;
+  readonly groupedPropList = signal<GroupedFormPropList | undefined>(undefined);
   groupedPropListOfArray: FormProp<any>[][];
-  record!: R;
+  readonly record = signal<R | undefined>(undefined);
+
+  constructor() {
+    effect(() => {
+      const recordValue = this.selectedRecord();
+      const type = !recordValue || JSON.stringify(recordValue) === '{}' ? 'create' : 'edit';
+      const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
+      this.groupedPropList.set(this.createGroupedList(propList));
+      this.record.set(recordValue);
+    });
+  }
 
   get form(): UntypedFormGroup {
     return (this.container ? this.container.control : { controls: {} }) as UntypedFormGroup;
@@ -75,8 +81,10 @@ export class ExtensibleFormComponent<R = any> {
   }
 
   //TODO: Reactor this method
-  isAnyGroupMemberVisible(index: number, data) {
-    const { items } = this.groupedPropList;
+  isAnyGroupMemberVisible(index: number, data: any) {
+    const groupedPropListValue = this.groupedPropList();
+    if (!groupedPropListValue) return false;
+    const { items } = groupedPropListValue;
     const formPropList = items[index].formPropList.toArray();
     return formPropList.some(prop => prop.visible(data));
   }
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 dcce4651ec..4a1e3647c7 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,6 +1,6 @@
 @if (isBrowser) {
 <ngx-datatable #table default [rows]="data" [count]="recordsTotal()" [list]="list()"
-  [selectionType]="selectable() ? _selectionType : undefined" (activate)="tableActivate.emit($event)"
+  [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">
@@ -28,7 +28,7 @@
 
     <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
       let-selectFn="selectFn">
-      @if (_selectionType !== 'single') {
+      @if (selectionType() !== 'single') {
       <div class="form-check">
         <input class="form-check-input table-check" type="checkbox" [checked]="allRowsSelected"
           (change)="selectFn(!allRowsSelected)" />
@@ -38,12 +38,12 @@
 
     <ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-isSelected="isSelected"
       let-onCheckboxChangeFn="onCheckboxChangeFn">
-      @if(_selectionType === 'single') {
+      @if(selectionType() === 'single') {
       <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
         <input class="form-check-input" type="radio" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
       </div>
       }
-      @if (_selectionType !== 'single') {
+      @if (selectionType() !== 'single') {
       <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
         <input class="form-check-input" type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
       </div>
@@ -52,12 +52,12 @@
 
   </ngx-datatable-column>
   }
-  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
-  <ngx-datatable-column [name]="actionsText | abpLocalization" [maxWidth]="_actionsColumnWidth() ?? undefined"
+  @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {
+  <ngx-datatable-column [name]="actionsText() | abpLocalization" [maxWidth]="_actionsColumnWidth() ?? undefined"
     [width]="_actionsColumnWidth() ?? 200" [canAutoResize]="!_actionsColumnWidth()" [sortable]="false">
     <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
       <ng-container
-        *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"></ng-container>
+        *ngTemplateOutlet="actionsTemplate() || gridActions; context: { $implicit: row, index: i }"></ng-container>
       <ng-template #gridActions>
         @if (isVisibleActions(row)) {
         <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
@@ -67,8 +67,8 @@
   </ngx-datatable-column>
   }
   @for (prop of propList; track prop.name; let i = $index) {
-  <ngx-datatable-column *abpVisible="prop.columnVisible(getInjected)" [width]="columnWidths[i] ?? 200"
-    [canAutoResize]="!columnWidths[i]"
+  <ngx-datatable-column *abpVisible="prop.columnVisible(getInjected)" [width]="columnWidths()[i] ?? 200"
+    [canAutoResize]="!columnWidths()[i]"
     [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization" [prop]="prop.name"
     [sortable]="prop.sortable">
     <ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
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 a05c64ac4e..81b9bdfc18 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
@@ -5,21 +5,18 @@ import {
   Component,
   computed,
   ContentChild,
-  EventEmitter,
   inject,
   Injector,
-  Input,
   LOCALE_ID,
-  OnChanges,
   OnDestroy,
-  Output,
   PLATFORM_ID,
   signal,
-  SimpleChanges,
   TemplateRef,
   TrackByFunction,
   ViewChild,
-  input
+  input,
+  effect,
+  output
 } from '@angular/core';
 import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 
@@ -47,7 +44,7 @@ import {
 import { ePropType } from '../../enums/props.enum';
 import { EntityActionList } from '../../models/entity-actions';
 import { EntityProp, EntityPropList } from '../../models/entity-props';
-import { PropData } from '../../models/props';
+import { ReadonlyPropData } from '../../models/props';
 import { ExtensionsService } from '../../services/extensions.service';
 import {
   ENTITY_PROP_TYPE_CLASSES,
@@ -87,7 +84,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
     }
   `],
 })
-export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewInit, OnDestroy {
+export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestroy {
   readonly #injector = inject(Injector);
   readonly getInjected = this.#injector.get.bind(this.#injector);
   protected readonly cdr = inject(ChangeDetectorRef);
@@ -99,54 +96,56 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   private platformId = inject(PLATFORM_ID);
   protected isBrowser = isPlatformBrowser(this.platformId);
 
-  protected _actionsText!: string;
-  @Input()
-  set actionsText(value: string) {
-    this._actionsText = value;
-  }
-
-  get actionsText(): string {
-    return this._actionsText ?? (this.actionList.length >= 1 ? 'AbpUi::Actions' : '');
-  }
-
-  @Input() data!: R[];
+  // Input signals
+  readonly actionsTextInput = input<string | undefined>(undefined, { alias: 'actionsText' });
+  readonly dataInput = input<R[]>([], { alias: 'data' });
   readonly list = input.required<ListService>();
   readonly recordsTotal = input.required<number>();
-
-  @Input() set actionsColumnWidth(width: number) {
-    this._actionsColumnWidth.set(width ? Number(width) : undefined);
-  }
-
-  @Input() actionsTemplate?: TemplateRef<any>;
-
-  @Output() tableActivate = new EventEmitter();
-
+  readonly actionsColumnWidthInput = input<number | undefined>(undefined, { alias: 'actionsColumnWidth' });
+  readonly actionsTemplate = input<TemplateRef<any> | undefined>(undefined);
   readonly selectable = input(false);
-
-  @Input() set selectionType(value: SelectionType | string) {
-    this._selectionType = typeof value === 'string' ? SelectionType[value] : value;
-  }
-  _selectionType: SelectionType = SelectionType.multiClick;
-
+  readonly selectionTypeInput = input<SelectionType | string>(SelectionType.multiClick, { alias: 'selectionType' });
   readonly selected = input<any[]>([]);
-  @Output() selectionChange = new EventEmitter<any[]>();
-
-  // Infinite scroll configuration
   readonly infiniteScroll = input(false);
   readonly isLoading = input(false);
   readonly scrollThreshold = input(10);
-  @Output() loadMore = new EventEmitter<void>();
-  readonly tableHeight = input<number>(undefined);
-
-  readonly rowDetailTemplate = input<TemplateRef<RowDetailContext<R>>>(undefined);
+  readonly tableHeight = input<number | undefined>(undefined);
+  readonly rowDetailTemplate = input<TemplateRef<RowDetailContext<R>> | undefined>(undefined);
   readonly rowDetailHeight = input<string | number>('100%');
-  @Output() rowDetailToggle = new EventEmitter<R>();
+
+  // Output signals
+  readonly tableActivate = output<any>();
+  readonly selectionChange = output<any[]>();
+  readonly loadMore = output<void>();
+  readonly rowDetailToggle = output<R>();
+
+  // Internal signals
+  protected readonly _data = signal<R[]>([]);
+  private readonly _actionsColumnWidth = signal<number | undefined>(DEFAULT_ACTIONS_COLUMN_WIDTH);
 
   @ContentChild(ExtensibleTableRowDetailComponent)
   rowDetailComponent?: ExtensibleTableRowDetailComponent<R>;
 
   @ViewChild('table', { static: false }) table!: DatatableComponent;
 
+  // Computed values
+  protected readonly actionsText = computed(() => {
+    return this.actionsTextInput() ?? (this.actionList.length >= 1 ? 'AbpUi::Actions' : '');
+  });
+
+  protected readonly selectionType = computed(() => {
+    const value = this.selectionTypeInput();
+    return typeof value === 'string' ? SelectionType[value as keyof typeof SelectionType] : value;
+  });
+
+  protected get data(): R[] {
+    return this._data();
+  }
+
+  protected set data(value: R[]) {
+    this._data.set(value);
+  }
+
   protected get effectiveRowDetailTemplate(): TemplateRef<RowDetailContext<R>> | undefined {
     return this.rowDetailComponent?.template() ?? this.rowDetailTemplate();
   }
@@ -163,9 +162,6 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
 
   readonly trackByFn: TrackByFunction<EntityProp<R>> = (_, item) => item.name;
 
-  // Signal for actions column width
-  private readonly _actionsColumnWidth = signal<number | undefined>(DEFAULT_ACTIONS_COLUMN_WIDTH);
-
   // Infinite scroll: debounced load more subject
   private readonly loadMoreSubject = new Subject<void>();
   private readonly loadMoreSubscription = this.loadMoreSubject
@@ -187,6 +183,53 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
       this.permissionService.filterItemsByPolicy(
         this.actionList.toArray().map(action => ({ requiredPolicy: action.permission })),
       ).length > 0;
+
+    // Watch actionsColumnWidth input
+    effect(() => {
+      const width = this.actionsColumnWidthInput();
+      this._actionsColumnWidth.set(width ? Number(width) : undefined);
+    });
+
+    // Watch data input changes
+    effect(() => {
+      const dataValue = this.dataInput();
+      if (!dataValue) return;
+
+      if (dataValue.length < 1) {
+        this.list().totalCount = this.recordsTotal();
+      }
+
+      this._data.set(dataValue.map((record: any, index: number) => {
+        this.propList.forEach(prop => {
+          const propData = { getInjected: this.getInjected, record, index } as ReadonlyPropData;
+          const value = this.getContent(prop.value, propData);
+
+          const propKey = `_${prop.value.name}`;
+          record[propKey] = {
+            visible: prop.value.visible(propData),
+            value,
+          };
+          if (prop.value.component) {
+            record[propKey].injector = Injector.create({
+              providers: [
+                {
+                  provide: PROP_DATA_STREAM,
+                  useValue: value,
+                },
+                {
+                  provide: ROW_RECORD,
+                  useValue: record,
+                },
+              ],
+              parent: this.#injector,
+            });
+            record[propKey].component = prop.value.component;
+          }
+        });
+
+        return record;
+      }));
+    });
   }
 
   private getIcon(value: boolean) {
@@ -201,7 +244,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
     return key;
   }
 
-  getContent(prop: EntityProp<R>, data: PropData): Observable<string> {
+  getContent(prop: EntityProp<R>, data: ReadonlyPropData): Observable<string> {
     return prop.valueResolver(data).pipe(
       map(value => {
         switch (prop.type) {
@@ -217,45 +260,6 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
     );
   }
 
-  ngOnChanges({ data }: SimpleChanges) {
-    if (!data?.currentValue) return;
-
-    if (data.currentValue.length < 1) {
-      this.list().totalCount = this.recordsTotal();
-    }
-
-    this.data = data.currentValue.map((record: any, index: number) => {
-      this.propList.forEach(prop => {
-        const propData = { getInjected: this.getInjected, record, index } as any;
-        const value = this.getContent(prop.value, propData);
-
-        const propKey = `_${prop.value.name}`;
-        record[propKey] = {
-          visible: prop.value.visible(propData),
-          value,
-        };
-        if (prop.value.component) {
-          record[propKey].injector = Injector.create({
-            providers: [
-              {
-                provide: PROP_DATA_STREAM,
-                useValue: value,
-              },
-              {
-                provide: ROW_RECORD,
-                useValue: record,
-              },
-            ],
-            parent: this.#injector,
-          });
-          record[propKey].component = prop.value.component;
-        }
-      });
-
-      return record;
-    });
-  }
-
   isVisibleActions(rowData: any): boolean {
     const actions = this.actionList.toArray();
     const visibleActions = actions.filter(action => {
@@ -278,9 +282,9 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
     return visibleActions.length > 0;
   }
 
-  onSelect({ selected }) {
+  onSelect({ selected }: { selected: any[] }) {
     const selectedValue = this.selected();
-    this.selected().splice(0, selectedValue.length);
+    selectedValue.splice(0, selectedValue.length);
     selectedValue.push(...selected);
     this.selectionChange.emit(selected);
   }
@@ -330,7 +334,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   ngAfterViewInit(): void {
     if (!this.infiniteScroll()) {
       this.list()?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
-        this.data = [];
+        this._data.set([]);
         this.cdr.markForCheck();
       });
     }
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 3c7bdd075e..4336b0f6fd 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
@@ -1,7 +1,6 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
   TrackByFunction,
   input
 } from '@angular/core';
@@ -35,9 +34,7 @@ import { NgTemplateOutlet } from '@angular/common';
 })
 export class GridActionsComponent<R = any> extends AbstractActionsComponent<EntityActionList<R>> {
   readonly icon = input('fa fa-cog');
-
-  @Input() readonly index?: number;
-
+  readonly index = input<number | undefined>(undefined);
   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 66ef16d177..6d25e6da6a 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
@@ -2,34 +2,33 @@
 import {
   Directive,
   Injector,
-  Input,
-  OnChanges,
   OnDestroy,
   TemplateRef,
   ViewContainerRef,
+  effect,
   inject,
   input
 } from '@angular/core';
 import { PropData, PropList } from '../models/props';
 
+type InferredRecord<L> = L extends PropList<infer R> ? R : never;
+
 @Directive({
   exportAs: 'abpPropData',
   selector: '[abpPropData]',
 })
 export class PropDataDirective<L extends PropList<any>>
-  extends PropData<InferredData<L>>
-  implements OnChanges, OnDestroy
+  extends PropData<InferredRecord<L>>
+  implements OnDestroy
 {
   private tempRef = inject<TemplateRef<any>>(TemplateRef);
   private vcRef = inject(ViewContainerRef);
 
-  readonly propList = input<L>(undefined, { alias: "abpPropDataFromList" });
-
-  @Input('abpPropDataWithRecord') record!: InferredData<L>['record'];
+  readonly propList = input<L | undefined>(undefined, { alias: 'abpPropDataFromList' });
+  readonly record = input.required<InferredRecord<L>>({ alias: 'abpPropDataWithRecord' });
+  readonly index = input<number | undefined>(undefined, { alias: 'abpPropDataAtIndex' });
 
-  @Input('abpPropDataAtIndex') index?: number;
-
-  readonly getInjected: InferredData<L>['getInjected'];
+  readonly getInjected: PropData<InferredRecord<L>>['getInjected'];
 
   constructor() {
     const injector = inject(Injector);
@@ -37,14 +36,19 @@ export class PropDataDirective<L extends PropList<any>>
     super();
 
     this.getInjected = injector.get.bind(injector);
-  }
 
-  ngOnChanges() {
-    this.vcRef.clear();
-
-    this.vcRef.createEmbeddedView(this.tempRef, {
-      $implicit: this.data,
-      index: 0,
+    // Watch for input changes and re-render
+    effect(() => {
+      // Read all inputs to track them
+      this.record();
+      this.index();
+      this.propList();
+      
+      this.vcRef.clear();
+      this.vcRef.createEmbeddedView(this.tempRef, {
+        $implicit: this.data,
+        index: 0,
+      });
     });
   }
 
@@ -52,6 +56,3 @@ export class PropDataDirective<L extends PropList<any>>
     this.vcRef.clear();
   }
 }
-
-type InferredData<L> = PropData<InferredRecord<L>>;
-type InferredRecord<L> = L extends PropList<infer R> ? R : never;
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 566194745f..3de746e316 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
@@ -9,18 +9,19 @@ export abstract class ActionData<R = any> {
     notFoundValue?: T,
     flags?: InjectOptions,
   ) => T;
-  index?: number;
+  index?: number | InputSignal<number | undefined>;
   abstract record: R | InputSignal<R>;
 
   get data(): ReadonlyActionData<R> {
     return {
       getInjected: this.getInjected,
-      index: this.index,
+      index: isSignal(this.index) ? this.index() : this.index,
       record: isSignal(this.record) ? this.record() : this.record,
     };
   }
 }
 
+
 export type ReadonlyActionData<R = any> = Readonly<{
   getInjected: <T>(
     token: Type<T> | InjectionToken<T>,
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
index 8a2a29e425..98f74d58aa 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/models/props.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';
 import { ePropType } from '../enums/props.enum';
 import { FormPropTooltip } from './form-props';
@@ -11,19 +11,27 @@ export abstract class PropData<R = any> {
     notFoundValue?: T,
     options?: InjectOptions,
   ) => T;
-  index?: number;
-  abstract record: R;
+  index?: number | InputSignal<number | undefined>;
+  abstract record: R | InputSignal<R>;
 
   get data(): ReadonlyPropData<R> {
     return {
       getInjected: this.getInjected,
-      index: this.index,
-      record: this.record,
+      index: isSignal(this.index) ? this.index() : this.index,
+      record: isSignal(this.record) ? this.record() : this.record,
     };
   }
 }
 
-export type ReadonlyPropData<R = any> = Readonly<Omit<PropData<R>, 'data'>>;
+export type ReadonlyPropData<R = any> = Readonly<{
+  getInjected: <T>(
+    token: Type<T> | InjectionToken<T>,
+    notFoundValue?: T,
+    options?: InjectOptions,
+  ) => T;
+  index?: number;
+  record: R;
+}>;
 
 export abstract class Prop<R = any> {
   constructor(
@@ -43,9 +51,10 @@ export abstract class Prop<R = any> {
   }
 }
 
-export type PropCallback<T, R = any> = (data: Omit<PropData<T>, 'data'>, auxData?: any) => R;
-export type PropPredicate<T> = (data?: Omit<PropData<T>, 'data'>, auxData?: any) => boolean;
-export type PropDisplayTextResolver<T> = (data?: Omit<PropData<T>, 'data'>) => string;
+export type PropCallback<T, R = any> = (data: ReadonlyPropData<T>, auxData?: any) => R;
+export type PropPredicate<T> = (data?: ReadonlyPropData<T>, auxData?: any) => boolean;
+export type PropDisplayTextResolver<T> = (data?: ReadonlyPropData<T>) => string;
+
 
 export abstract class PropsFactory<C extends Props<any>> {
   protected abstract _ctor: Type<C>;
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts b/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
index 1bd25966fc..a5882ab8e1 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
@@ -4,11 +4,14 @@ import { DateTimeAdapter, DateAdapter, TimeAdapter } from '@abp/ng.theme.shared'
 import { EXTRA_PROPERTIES_KEY } from '../constants/extra-properties';
 import { ePropType } from '../enums/props.enum';
 import { FormPropList } from '../models/form-props';
-import { PropData } from '../models/props';
+import { PropData, ReadonlyPropData } from '../models/props';
 import { ExtensionsService } from '../services/extensions.service';
 import { EXTENSIONS_IDENTIFIER } from '../tokens/extensions.token';
 
-export function generateFormFromProps<R = any>(data: PropData<R>) {
+export function generateFormFromProps<R = any>(propData: PropData<R>) {
+  // Use .data to get resolved values (handles InputSignal)
+  const data: ReadonlyPropData<R> = propData.data;
+  
   const extensions = data.getInjected(ExtensionsService<R>);
   const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
 
@@ -16,7 +19,7 @@ export function generateFormFromProps<R = any>(data: PropData<R>) {
   const extraForm = new UntypedFormGroup({});
   form.addControl(EXTRA_PROPERTIES_KEY, extraForm);
 
-  const record = data.record || {};
+  const record: any = data.record || {};
   const type = JSON.stringify(record) === '{}' ? 'create' : 'edit';
   const props: FormPropList<R> = extensions[`${type}FormProps`].get(identifier).props;
   const extraProperties = record[EXTRA_PROPERTIES_KEY] || {};
@@ -65,3 +68,4 @@ export function generateFormFromProps<R = any>(data: PropData<R>) {
 
   return form;
 }
+
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 e5f9908e5c..23c243edc6 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
@@ -2,16 +2,13 @@ import {
   Directive,
   TemplateRef,
   ViewContainerRef,
-  Input,
   InjectionToken,
   OnInit,
   OnDestroy,
   Injector,
-  OnChanges,
-  SimpleChanges,
-  SimpleChange,
   inject,
-  input
+  input,
+  effect
 } from '@angular/core';
 import { Observable, Subscription, of } from 'rxjs';
 
@@ -19,7 +16,7 @@ export interface PageRenderStrategy {
   shouldRender(type?: string): boolean | Observable<boolean>;
   onInit?(type?: string, injector?: Injector, context?: any): void;
   onDestroy?(type?: string, injector?: Injector, context?: any): void;
-  onContextUpdate?(change?: SimpleChange): void;
+  onContextUpdate?(context?: any): void;
 }
 
 export const PAGE_RENDER_STRATEGY = new InjectionToken<PageRenderStrategy>('PAGE_RENDER_STRATEGY');
@@ -27,20 +24,34 @@ export const PAGE_RENDER_STRATEGY = new InjectionToken<PageRenderStrategy>('PAGE
 @Directive({
   selector: '[abpPagePart]',
 })
-export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
+export class PagePartDirective implements OnInit, OnDestroy {
   private templateRef = inject<TemplateRef<any>>(TemplateRef);
   private viewContainer = inject(ViewContainerRef);
   private renderLogic = inject<PageRenderStrategy>(PAGE_RENDER_STRATEGY, { optional: true })!;
   private injector = inject(Injector);
 
   hasRendered = false;
-  type!: string;
   subscription!: Subscription;
 
-  readonly context = input<any>(undefined, { alias: "abpPagePartContext" });
-  @Input() set abpPagePart(type: string) {
-    this.type = type;
-    this.createRenderStream(type);
+  readonly context = input<any>(undefined, { alias: 'abpPagePartContext' });
+  readonly abpPagePart = input<string>('');
+
+  constructor() {
+    // Watch for type changes
+    effect(() => {
+      const type = this.abpPagePart();
+      if (type) {
+        this.createRenderStream(type);
+      }
+    });
+
+    // Watch for context changes
+    effect(() => {
+      const ctx = this.context();
+      if (this.renderLogic?.onContextUpdate) {
+        this.renderLogic.onContextUpdate(ctx);
+      }
+    });
   }
 
   render = (shouldRender: boolean) => {
@@ -53,15 +64,9 @@ export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
     }
   };
 
-  ngOnChanges({ context }: SimpleChanges): void {
-    if (this.renderLogic?.onContextUpdate) {
-      this.renderLogic.onContextUpdate(context);
-    }
-  }
-
   ngOnInit() {
     if (this.renderLogic?.onInit) {
-      this.renderLogic.onInit(this.type, this.injector, this.context());
+      this.renderLogic.onInit(this.abpPagePart(), this.injector, this.context());
     }
   }
 
@@ -69,7 +74,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.abpPagePart(), this.injector, this.context());
     }
   }
 

From 0c09657851bd96c454489a40bf190c552b75bc66 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Sat, 31 Jan 2026 13:40:09 +0300
Subject: [PATCH 07/10] Refactor components to use Angular signal
 inputs/outputs

Migrates Tree, FeatureManagement, and PermissionManagement components to use Angular's new signal-based input and output APIs. Updates templates and internal logic to access input values as functions, replaces EventEmitter with output signals, and synchronizes internal state using signals and effects. Also updates related model interfaces to use InputSignal and OutputEmitterRef types.
---
 .../src/lib/components/tree.component.html    |   8 +-
 .../tree/src/lib/components/tree.component.ts | 121 ++++++++++------
 .../feature-management.component.html         |   6 +-
 .../feature-management.component.ts           |  62 +++++----
 .../src/lib/models/feature-management.ts      |   9 +-
 .../permission-management.component.html      |   6 +-
 .../permission-management.component.ts        | 130 ++++++++++--------
 .../src/lib/models/permission-management.ts   |  11 +-
 8 files changed, 213 insertions(+), 140 deletions(-)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index 8cd2058699..4980e78273 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
@@ -1,8 +1,8 @@
 <nz-tree
   [nzBeforeDrop]="beforeDrop"
-  [nzDraggable]="draggable"
-  [nzCheckStrictly]="checkStrictly"
-  [nzCheckable]="checkable"
+  [nzDraggable]="draggable()"
+  [nzCheckStrictly]="checkStrictly()"
+  [nzCheckable]="checkable()"
   [nzCheckedKeys]="checkedKeys"
   [nzData]="nodes"
   [nzTreeTemplate]="treeTemplate"
@@ -11,7 +11,7 @@
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckboxChange)="onCheckboxChange($event)"
   (nzOnDrop)="onDrop($event)"
-  [nzNoAnimation]="noAnimation"
+  [nzNoAnimation]="noAnimation()"
   (nzContextMenu)="onContextMenuChange($event)"
 />
 <ng-template #treeTemplate let-node>
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index 5c320a539b..f8c624ec9d 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@@ -3,13 +3,14 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChild,
-  EventEmitter,
   inject,
-  Input,
   OnInit,
-  Output,
   TemplateRef,
   ViewEncapsulation,
+  input,
+  output,
+  signal,
+  effect
 } from '@angular/core';
 import { NgbDropdown, NgbDropdownMenu, NgbDropdownToggle } from '@ng-bootstrap/ng-bootstrap';
 import {
@@ -56,32 +57,66 @@ export class TreeComponent implements OnInit {
   private cdr = inject(ChangeDetectorRef);
   private disableTreeStyleLoading = inject(DISABLE_TREE_STYLE_LOADING_TOKEN, { optional: true });
 
-  dropPosition: number;
+  dropPosition!: number;
 
   dropdowns = {} as { [key: string]: NgbDropdown };
 
-  @ContentChild('menu') menu: TemplateRef<any>;
-  @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
-  @ContentChild(ExpandedIconTemplateDirective) expandedIconTemplate: ExpandedIconTemplateDirective;
-  @Output() readonly checkedKeysChange = new EventEmitter();
-  @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
-  @Output() readonly selectedNodeChange = new EventEmitter();
-  @Output() readonly dropOver = new EventEmitter<DropEvent>();
-  @Output() readonly nzExpandChange = new EventEmitter<NzFormatEmitEvent>();
-  @Input() noAnimation = true;
-  @Input() draggable: boolean;
-  @Input() checkable: boolean;
-  @Input() checkStrictly: boolean;
-  @Input() checkedKeys = [];
-  @Input() nodes = [];
-  @Input() expandedKeys: string[] = [];
-  @Input() selectedNode: any;
-  @Input() changeCheckboxWithNode: boolean;
-  @Input() isNodeSelected = node => this.selectedNode?.id === node.key;
-  @Input() beforeDrop = (event: NzFormatBeforeDropEvent) => {
-    this.dropPosition = event.pos;
-    return of(false);
-  };
+  @ContentChild('menu') menu!: TemplateRef<any>;
+  @ContentChild(TreeNodeTemplateDirective) customNodeTemplate!: TreeNodeTemplateDirective;
+  @ContentChild(ExpandedIconTemplateDirective) expandedIconTemplate!: ExpandedIconTemplateDirective;
+  
+  // Output signals
+  readonly checkedKeysChange = output<any>();
+  readonly expandedKeysChange = output<string[]>();
+  readonly selectedNodeChange = output<any>();
+  readonly dropOver = output<DropEvent>();
+  readonly nzExpandChange = output<NzFormatEmitEvent>();
+  
+  // Input signals
+  readonly noAnimation = input(true);
+  readonly draggable = input<boolean | undefined>(undefined);
+  readonly checkable = input<boolean | undefined>(undefined);
+  readonly checkStrictly = input<boolean | undefined>(undefined);
+  readonly checkedKeysInput = input<any[]>([], { alias: 'checkedKeys' });
+  readonly nodesInput = input<any[]>([], { alias: 'nodes' });
+  readonly expandedKeysInput = input<string[]>([], { alias: 'expandedKeys' });
+  readonly selectedNodeInput = input<any>(undefined, { alias: 'selectedNode' });
+  readonly changeCheckboxWithNode = input<boolean | undefined>(undefined);
+  readonly isNodeSelectedFn = input<(node: any) => boolean>(
+    (node) => this._selectedNode() === node.key,
+    { alias: 'isNodeSelected' }
+  );
+  readonly beforeDropFn = input<(event: NzFormatBeforeDropEvent) => any>(
+    (event: NzFormatBeforeDropEvent) => {
+      this.dropPosition = event.pos;
+      return of(false);
+    },
+    { alias: 'beforeDrop' }
+  );
+
+  // Internal signals for two-way binding
+  protected readonly _checkedKeys = signal<any[]>([]);
+  protected readonly _expandedKeys = signal<string[]>([]);
+  protected readonly _selectedNode = signal<any>(undefined);
+  protected readonly _nodes = signal<any[]>([]);
+
+  // Getters for template access
+  get checkedKeys() { return this._checkedKeys(); }
+  get expandedKeys() { return this._expandedKeys(); }
+  get selectedNode() { return this._selectedNode(); }
+  get nodes() { return this._nodes(); }
+  get isNodeSelected() { return this.isNodeSelectedFn(); }
+  get beforeDrop() { return this.beforeDropFn(); }
+
+  constructor() {
+    // Sync input signals to internal signals
+    effect(() => {
+      this._checkedKeys.set(this.checkedKeysInput());
+      this._expandedKeys.set(this.expandedKeysInput());
+      this._selectedNode.set(this.selectedNodeInput());
+      this._nodes.set(this.nodesInput());
+    });
+  }
 
   ngOnInit() {
     this.loadStyle();
@@ -97,13 +132,13 @@ export class TreeComponent implements OnInit {
     this.subscriptionService.addOne(loaded$);
   }
 
-  private findNode(target: any, nodes: any[]) {
+  private findNode(target: any, nodes: any[]): any {
     for (const node of nodes) {
       if (node.key === target.id) {
         return node;
       }
       if (node.children) {
-        const res = this.findNode(target, node.children);
+        const res: any = this.findNode(target, node.children);
         if (res) {
           return res;
         }
@@ -113,36 +148,36 @@ export class TreeComponent implements OnInit {
   }
 
   onSelectedNodeChange(node: NzTreeNode) {
-    this.selectedNode = node.origin.entity;
-    if (this.changeCheckboxWithNode) {
+    this._selectedNode.set(node.origin.entity);
+    if (this.changeCheckboxWithNode()) {
       let newVal;
       if (node.isChecked) {
-        newVal = this.checkedKeys.filter(x => x !== node.key);
+        newVal = this._checkedKeys().filter(x => x !== node.key);
       } else {
-        newVal = [...this.checkedKeys, node.key];
+        newVal = [...this._checkedKeys(), node.key];
       }
       this.selectedNodeChange.emit(node);
-      this.checkedKeys = newVal;
+      this._checkedKeys.set(newVal);
       this.checkedKeysChange.emit(newVal);
     } else {
       this.selectedNodeChange.emit(node.origin.entity);
     }
   }
 
-  onCheckboxChange(event) {
-    this.checkedKeys = [...event.keys];
+  onCheckboxChange(event: { keys: any[] }) {
+    this._checkedKeys.set([...event.keys]);
     this.checkedKeysChange.emit(event.keys);
   }
 
-  onExpandedKeysChange(event) {
-    this.expandedKeys = [...event.keys];
+  onExpandedKeysChange(event: { keys: string[] } & NzFormatEmitEvent) {
+    this._expandedKeys.set([...event.keys]);
     this.expandedKeysChange.emit(event.keys);
     this.nzExpandChange.emit(event);
   }
 
   onDrop(event: DropEvent) {
-    event.event.stopPropagation();
-    event.event.preventDefault();
+    event.event?.stopPropagation();
+    event.event?.preventDefault();
     event.pos = this.dropPosition;
 
     this.dropOver.emit(event);
@@ -160,12 +195,14 @@ export class TreeComponent implements OnInit {
         dropdown.close();
       }
     });
-    this.dropdowns[dropdownKey]?.toggle();
+    if (dropdownKey) {
+      this.dropdowns[dropdownKey]?.toggle();
+    }
   }
 
   setSelectedNode(node: any) {
-    const newSelectedNode = this.findNode(node, this.nodes);
-    this.selectedNode = { ...newSelectedNode };
+    const newSelectedNode = this.findNode(node, this._nodes());
+    this._selectedNode.set({ ...newSelectedNode });
     this.cdr.markForCheck();
   }
 }
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
index f59a66b6a5..bd08cbb7b7 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
@@ -3,8 +3,8 @@
   <ng-template #abpHeader>
     <h3>
       {{ 'AbpFeatureManagement::Features' | abpLocalization }}
-      @if (providerTitle) {
-      - {{ providerTitle }}
+      @if (providerTitle()) {
+      - {{ providerTitle() }}
       }
     </h3>
   </ng-template>
@@ -38,7 +38,7 @@
               @for (feature of features[group.name]; track feature.id || i; let i = $index) {
               @let provider = feature.provider.name;
               @let isFeatureDisabled = !feature.parentName ? isParentDisabled(feature.name, group.name, provider) :
-              (provider !== providerName && provider !== defaultProviderName);
+              (provider !== providerName() && provider !== defaultProviderName);
 
               <div class="mt-2" [style]="feature.style" (keyup.enter)="save()">
                 @switch (feature.valueType?.name) {
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
index 5feac210e5..47bfc3e96e 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, inject, DOCUMENT } from '@angular/core';
+import { Component, inject, DOCUMENT, input, output, signal, effect } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStateService, LocalizationPipe, TrackByService } from '@abp/ng.core';
@@ -61,14 +61,17 @@ export class FeatureManagementComponent
   protected readonly confirmationService = inject(ConfirmationService);
   private document = inject(DOCUMENT);
 
-  @Input()
-  providerKey: string;
+  // Signal inputs
+  readonly providerKey = input<string | undefined>(undefined);
+  readonly providerName = input<string | undefined>(undefined);
+  readonly providerTitle = input<string | undefined>(undefined);
+  readonly visibleInput = input(false, { alias: 'visible' });
 
-  @Input()
-  providerName: string;
+  // Output signals
+  readonly visibleChange = output<boolean>();
 
-  @Input({ required: false })
-  providerTitle: string;
+  // Internal state
+  protected readonly _visible = signal(false);
 
   selectedGroupDisplayName: string;
 
@@ -82,33 +85,41 @@ export class FeatureManagementComponent
 
   defaultProviderName = DEFAULT_PROVIDER_NAME;
 
-  protected _visible;
+  modalBusy = false;
 
-  @Input()
+  // Getter/setter for backward compatibility
   get visible(): boolean {
-    return this._visible;
+    return this._visible();
   }
 
   set visible(value: boolean) {
-    if (this._visible === value) {
+    if (this._visible() === value) {
       return;
     }
 
-    this._visible = value;
+    this._visible.set(value);
     this.visibleChange.emit(value);
 
     if (value) {
       this.openModal();
-      return;
     }
   }
 
-  @Output() readonly visibleChange = new EventEmitter<boolean>();
-
-  modalBusy = false;
+  constructor() {
+    // Sync visible input to internal signal
+    effect(() => {
+      const inputValue = this.visibleInput();
+      if (this._visible() !== inputValue) {
+        this._visible.set(inputValue);
+        if (inputValue) {
+          this.openModal();
+        }
+      }
+    });
+  }
 
   openModal() {
-    if (!this.providerName) {
+    if (!this.providerName()) {
       throw new Error('providerName is required.');
     }
 
@@ -116,7 +127,7 @@ export class FeatureManagementComponent
   }
 
   getFeatures() {
-    this.service.get(this.providerName, this.providerKey).subscribe(res => {
+    this.service.get(this.providerName()!, this.providerKey()).subscribe(res => {
       if (!res.groups?.length) return;
       this.groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));
       this.selectedGroupDisplayName = this.groups[0].displayName;
@@ -149,13 +160,13 @@ export class FeatureManagementComponent
 
     this.modalBusy = true;
     this.service
-      .update(this.providerName, this.providerKey, { features: changedFeatures })
+      .update(this.providerName()!, this.providerKey(), { features: changedFeatures })
       .pipe(finalize(() => (this.modalBusy = false)))
       .subscribe(() => {
         this.visible = false;
 
         this.toasterService.success('AbpUi::SavedSuccessfully');
-        if (!this.providerKey) {
+        if (!this.providerKey()) {
           // to refresh host's features
           this.configState.refreshAppState().subscribe();
         }
@@ -167,11 +178,11 @@ export class FeatureManagementComponent
       .warn('AbpFeatureManagement::AreYouSureToResetToDefault', 'AbpFeatureManagement::AreYouSure')
       .subscribe((status: Confirmation.Status) => {
         if (status === Confirmation.Status.confirm) {
-          this.service.delete(this.providerName, this.providerKey).subscribe(() => {
+          this.service.delete(this.providerName()!, this.providerKey()).subscribe(() => {
             this.toasterService.success('AbpFeatureManagement::ResetedToDefault');
             this.visible = false;
 
-            if (!this.providerKey) {
+            if (!this.providerKey()) {
               // to refresh host's features
               this.configState.refreshAppState().subscribe();
             }
@@ -190,17 +201,18 @@ export class FeatureManagementComponent
 
   isParentDisabled(parentName: string, groupName: string, provider: string): boolean {
     const children = this.features[groupName]?.filter(f => f.parentName === parentName);
+    const providerNameValue = this.providerName();
 
     if (children?.length) {
       return children.some(child => {
         const childProvider = child.provider?.name;
         return (
-          (childProvider !== this.providerName && childProvider !== this.defaultProviderName) ||
-          (provider !== this.providerName && provider !== this.defaultProviderName)
+          (childProvider !== providerNameValue && childProvider !== this.defaultProviderName) ||
+          (provider !== providerNameValue && provider !== this.defaultProviderName)
         );
       });
     } else {
-      return provider !== this.providerName && provider !== this.defaultProviderName;
+      return provider !== providerNameValue && provider !== this.defaultProviderName;
     }
   }
 
diff --git a/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts b/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
index c04d917515..31a7efd22c 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
@@ -1,13 +1,14 @@
-import { EventEmitter } from '@angular/core';
+import { InputSignal, OutputEmitterRef } from '@angular/core';
 
 export namespace FeatureManagement {
   export interface FeatureManagementComponentInputs {
     visible: boolean;
-    readonly providerName: string;
-    readonly providerKey: string;
+    readonly providerName: InputSignal<string | undefined>;
+    readonly providerKey: InputSignal<string | undefined>;
   }
 
   export interface FeatureManagementComponentOutputs {
-    readonly visibleChange: EventEmitter<boolean>;
+    readonly visibleChange: OutputEmitterRef<boolean>;
   }
 }
+
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
index 0224f3d45a..0711bb995b 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html
@@ -1,9 +1,9 @@
 <abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg', scrollable: false }">
-  @if (data.entityDisplayName || entityDisplayName) {
+  @if (data.entityDisplayName || entityDisplayName()) {
     <ng-template #abpHeader>
       <h4>
         {{ 'AbpPermissionManagement::Permissions' | abpLocalization }} -
-        {{ entityDisplayName || data.entityDisplayName }}
+        {{ entityDisplayName() || data.entityDisplayName }}
       </h4>
     </ng-template>
     <ng-template #abpBody>
@@ -115,7 +115,7 @@
                           />
                           <label class="form-check-label" [attr.for]="permission.name"
                             >{{ permission.displayName }}
-                            @if (!hideBadges) {
+                            @if (!hideBadges()) {
                               @for (provider of permission.grantedProviders; track $index) {
                                 <span class="badge bg-primary text-dark"
                                   >{{ provider.providerName }}: {{ provider.providerKey }}</span
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index b2612e9aaf..eb2103b1e0 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -19,14 +19,14 @@ import {
   computed,
   DOCUMENT,
   ElementRef,
-  EventEmitter,
   inject,
-  Input,
-  Output,
+  input,
+  output,
   QueryList,
   signal,
   TrackByFunction,
   ViewChildren,
+  effect,
 } from '@angular/core';
 import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
@@ -118,49 +118,18 @@ export class PermissionManagementComponent
   protected readonly toasterService = inject(ToasterService);
   private document = inject(DOCUMENT);
 
-  @Input()
-  readonly providerName!: string;
+  // Signal inputs
+  readonly providerName = input.required<string>();
+  readonly providerKey = input.required<string>();
+  readonly hideBadges = input(false);
+  readonly entityDisplayName = input<string | undefined>(undefined);
+  readonly visibleInput = input(false, { alias: 'visible' });
 
-  @Input()
-  readonly providerKey!: string;
+  // Output signals
+  readonly visibleChange = output<boolean>();
 
-  @Input()
-  readonly hideBadges = false;
-
-  protected _visible = false;
-
-  @Input()
-  entityDisplayName: string | undefined;
-
-  @Input()
-  get visible(): boolean {
-    return this._visible;
-  }
-
-  set visible(value: boolean) {
-    if (value === this._visible) {
-      return;
-    }
-
-    if (value) {
-      this.openModal().subscribe(() => {
-        this._visible = true;
-        this.visibleChange.emit(true);
-        concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
-          .pipe(take(1))
-          .subscribe(() => {
-            this.initModal();
-          });
-      });
-    } else {
-      this.setSelectedGroup(null);
-      this._visible = false;
-      this.visibleChange.emit(false);
-      this.filter.set('');
-    }
-  }
-
-  @Output() readonly visibleChange = new EventEmitter<boolean>();
+  // Internal state
+  protected readonly _visible = signal(false);
 
   @ViewChildren('selectAllInThisTabsRef')
   selectAllInThisTabsRef!: QueryList<ElementRef<HTMLInputElement>>;
@@ -216,6 +185,59 @@ export class PermissionManagementComponent
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
+  // Getter/setter for backward compatibility
+  get visible(): boolean {
+    return this._visible();
+  }
+
+  set visible(value: boolean) {
+    if (value === this._visible()) {
+      return;
+    }
+
+    if (value) {
+      this.openModal().subscribe(() => {
+        this._visible.set(true);
+        this.visibleChange.emit(true);
+        concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
+          .pipe(take(1))
+          .subscribe(() => {
+            this.initModal();
+          });
+      });
+    } else {
+      this.setSelectedGroup(null);
+      this._visible.set(false);
+      this.visibleChange.emit(false);
+      this.filter.set('');
+    }
+  }
+
+  constructor() {
+    // Sync visible input to internal signal
+    effect(() => {
+      const inputValue = this.visibleInput();
+      if (this._visible() !== inputValue) {
+        if (inputValue) {
+          this.openModal().subscribe(() => {
+            this._visible.set(true);
+            this.visibleChange.emit(true);
+            concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
+              .pipe(take(1))
+              .subscribe(() => {
+                this.initModal();
+              });
+          });
+        } else {
+          this.setSelectedGroup(null);
+          this._visible.set(false);
+          this.visibleChange.emit(false);
+          this.filter.set('');
+        }
+      }
+    });
+  }
+
   getChecked(name: string) {
     return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;
   }
@@ -249,7 +271,7 @@ export class PermissionManagementComponent
       this.disableSelectAllTab = permissions.every(
         permission =>
           permission.isGranted &&
-          permission.grantedProviders?.every(p => p.providerName !== this.providerName),
+          permission.grantedProviders?.every(p => p.providerName !== this.providerName()),
       );
     } else {
       this.disableSelectAllTab = false;
@@ -258,7 +280,7 @@ export class PermissionManagementComponent
 
   isGrantedByOtherProviderName(grantedProviders: ProviderInfoDto[]): boolean {
     if (grantedProviders.length) {
-      return grantedProviders.findIndex(p => p.providerName !== this.providerName) > -1;
+      return grantedProviders.findIndex(p => p.providerName !== this.providerName()) > -1;
     }
     return false;
   }
@@ -348,7 +370,7 @@ export class PermissionManagementComponent
 
   setTabCheckboxState() {
     const selectablePermissions = this.selectedGroupPermissions.filter(per =>
-      per.grantedProviders.every(p => p.providerName === this.providerName),
+      per.grantedProviders.every(p => p.providerName === this.providerName()),
     );
 
     const selectedPermissions = selectablePermissions.filter(per => per.isGranted);
@@ -370,7 +392,7 @@ export class PermissionManagementComponent
 
   setGrantCheckboxState() {
     const selectablePermissions = this.permissions.filter(per =>
-      per.grantedProviders.every(p => p.providerName === this.providerName),
+      per.grantedProviders.every(p => p.providerName === this.providerName()),
     );
     const selectedAllPermissions = selectablePermissions.filter(per => per.isGranted);
     const checkboxElement = this.document.querySelector('#select-all-in-all-tabs') as any;
@@ -456,7 +478,7 @@ export class PermissionManagementComponent
 
     this.modalBusy = true;
     this.service
-      .update(this.providerName, this.providerKey, { permissions: changedPermissions })
+      .update(this.providerName(), this.providerKey(), { permissions: changedPermissions })
       .pipe(
         switchMap(() =>
           this.shouldFetchAppConfig() ? this.configState.refreshAppState() : of(null),
@@ -470,11 +492,11 @@ export class PermissionManagementComponent
   }
 
   openModal() {
-    if (!this.providerKey || !this.providerName) {
+    if (!this.providerKey() || !this.providerName()) {
       throw new Error('Provider Key and Provider Name are required.');
     }
 
-    return this.service.get(this.providerName, this.providerKey).pipe(
+    return this.service.get(this.providerName(), this.providerKey()).pipe(
       tap((permissionRes: GetPermissionListResultDto) => {
         const { groups } = permissionRes || {};
 
@@ -486,7 +508,7 @@ export class PermissionManagementComponent
         this.disabledSelectAllInAllTabs = this.permissions.every(
           per =>
             per.isGranted &&
-            per.grantedProviders.every(provider => provider.providerName !== this.providerName),
+            per.grantedProviders.every(provider => provider.providerName !== this.providerName()),
         );
       }),
     );
@@ -511,9 +533,9 @@ export class PermissionManagementComponent
   shouldFetchAppConfig() {
     const currentUser = this.configState.getOne('currentUser') as CurrentUserDto;
 
-    if (this.providerName === 'R') return currentUser.roles.some(role => role === this.providerKey);
+    if (this.providerName() === 'R') return currentUser.roles.some(role => role === this.providerKey());
 
-    if (this.providerName === 'U') return currentUser.id === this.providerKey;
+    if (this.providerName() === 'U') return currentUser.id === this.providerKey();
 
     return false;
   }
diff --git a/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts b/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
index 7909de0db9..e5ccd55ba6 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
@@ -1,5 +1,5 @@
 import { GetPermissionListResultDto } from '@abp/ng.permission-management/proxy';
-import { EventEmitter } from '@angular/core';
+import { InputSignal, OutputEmitterRef } from '@angular/core';
 
 export namespace PermissionManagement {
   export interface State {
@@ -8,12 +8,13 @@ export namespace PermissionManagement {
 
   export interface PermissionManagementComponentInputs {
     visible: boolean;
-    readonly providerName: string;
-    readonly providerKey: string;
-    readonly hideBadges: boolean;
+    readonly providerName: InputSignal<string>;
+    readonly providerKey: InputSignal<string>;
+    readonly hideBadges: InputSignal<boolean>;
   }
 
   export interface PermissionManagementComponentOutputs {
-    readonly visibleChange: EventEmitter<boolean>;
+    readonly visibleChange: OutputEmitterRef<boolean>;
   }
 }
+

From 80794c176e3bb3d4694c5b0fdf36c02e1013cf4d Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Sat, 31 Jan 2026 18:34:14 +0300
Subject: [PATCH 08/10] Refactor component input/output types for feature and
 permission management

Replaced Angular InputSignal and OutputEmitterRef types with standard string, boolean, and EventEmitter types in feature-management and permission-management models. Updated corresponding components to remove interface implementations, simplifying input/output handling and improving compatibility.
---
 .../feature-management.component.ts                   |  7 +------
 .../src/lib/models/feature-management.ts              |  9 ++++-----
 .../lib/components/permission-management.component.ts |  7 +------
 .../src/lib/models/permission-management.ts           | 11 +++++------
 4 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
index 47bfc3e96e..0ba6880036 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
@@ -20,7 +20,6 @@ import {
 import { Tabs, TabList, Tab, TabPanel, TabContent } from '@angular/aria/tabs';
 import { finalize } from 'rxjs/operators';
 import { FreeTextInputDirective } from '../../directives';
-import { FeatureManagement } from '../../models';
 
 enum ValueTypes {
   ToggleStringValueType = 'ToggleStringValueType',
@@ -49,11 +48,7 @@ const DEFAULT_PROVIDER_NAME = 'D';
     ModalCloseDirective,
   ],
 })
-export class FeatureManagementComponent
-  implements
-    FeatureManagement.FeatureManagementComponentInputs,
-    FeatureManagement.FeatureManagementComponentOutputs
-{
+export class FeatureManagementComponent {
   protected readonly track = inject(TrackByService);
   protected readonly toasterService = inject(ToasterService);
   protected readonly service = inject(FeaturesService);
diff --git a/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts b/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
index 31a7efd22c..c04d917515 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
@@ -1,14 +1,13 @@
-import { InputSignal, OutputEmitterRef } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 
 export namespace FeatureManagement {
   export interface FeatureManagementComponentInputs {
     visible: boolean;
-    readonly providerName: InputSignal<string | undefined>;
-    readonly providerKey: InputSignal<string | undefined>;
+    readonly providerName: string;
+    readonly providerKey: string;
   }
 
   export interface FeatureManagementComponentOutputs {
-    readonly visibleChange: OutputEmitterRef<boolean>;
+    readonly visibleChange: EventEmitter<boolean>;
   }
 }
-
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index eb2103b1e0..1a0298113d 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -30,7 +30,6 @@ import {
 } from '@angular/core';
 import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
-import { PermissionManagement } from '../models';
 
 import { FormsModule } from '@angular/forms';
 
@@ -108,11 +107,7 @@ type PermissionWithGroupName = PermissionGrantInfoDto & {
     TabContent,
   ],
 })
-export class PermissionManagementComponent
-  implements
-    PermissionManagement.PermissionManagementComponentInputs,
-    PermissionManagement.PermissionManagementComponentOutputs
-{
+export class PermissionManagementComponent {
   protected readonly service = inject(PermissionsService);
   protected readonly configState = inject(ConfigStateService);
   protected readonly toasterService = inject(ToasterService);
diff --git a/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts b/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
index e5ccd55ba6..7909de0db9 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
@@ -1,5 +1,5 @@
 import { GetPermissionListResultDto } from '@abp/ng.permission-management/proxy';
-import { InputSignal, OutputEmitterRef } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 
 export namespace PermissionManagement {
   export interface State {
@@ -8,13 +8,12 @@ export namespace PermissionManagement {
 
   export interface PermissionManagementComponentInputs {
     visible: boolean;
-    readonly providerName: InputSignal<string>;
-    readonly providerKey: InputSignal<string>;
-    readonly hideBadges: InputSignal<boolean>;
+    readonly providerName: string;
+    readonly providerKey: string;
+    readonly hideBadges: boolean;
   }
 
   export interface PermissionManagementComponentOutputs {
-    readonly visibleChange: OutputEmitterRef<boolean>;
+    readonly visibleChange: EventEmitter<boolean>;
   }
 }
-

From bb5f10eb55700b471d475860962732a7b7b53b97 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Wed, 4 Feb 2026 13:52:08 +0300
Subject: [PATCH 09/10] update: remove unused imports

---
 .../extensible-form-prop.component.ts         |  12 +-
 .../extensible-table.component.html           | 309 +++++++++++-------
 .../extensible-table.component.ts             |  96 +++---
 .../src/lib/utils/form-props.util.ts          |   6 +-
 .../directives/free-text-input.directive.ts   |   6 +-
 5 files changed, 260 insertions(+), 169 deletions(-)

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 65223b397e..fd40dd4c8e 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
@@ -14,13 +14,11 @@ import {
   ElementRef,
   inject,
   Injector,
-  OnChanges,
   Optional,
-  SimpleChanges,
   SkipSelf,
   ViewChild,
   effect,
-  input
+  input,
 } from '@angular/core';
 import {
   ControlContainer,
@@ -71,7 +69,7 @@ import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-f
     AsyncPipe,
     NgComponentOutlet,
     NgTemplateOutlet,
-    FormsModule
+    FormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [ExtensibleFormPropService],
@@ -112,7 +110,7 @@ export class ExtensibleFormPropComponent implements AfterViewInit {
   disabledFn = (data: ReadonlyPropData) => false;
 
   get disabled() {
-    return this.disabledFn(this.data().data);
+    return this.disabledFn(this.data()?.data);
   }
 
   constructor() {
@@ -120,9 +118,9 @@ export class ExtensibleFormPropComponent implements AfterViewInit {
     effect(() => {
       const currentProp = this.prop();
       if (!currentProp) return;
-      
+
       const { options, readonly, disabled, validators, className, template } = currentProp;
-      
+
       if (template) {
         this.injectorForCustomComponent = Injector.create({
           providers: [
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 4a1e3647c7..8452915c4f 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,119 +1,202 @@
 @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">
-  @if (effectiveRowDetailTemplate) {
-  <ngx-datatable-row-detail [rowHeight]="effectiveRowDetailHeight">
-    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
-      <ng-container
-        *ngTemplateOutlet="effectiveRowDetailTemplate; context: { row: row, expanded: expanded }" />
-    </ng-template>
-  </ngx-datatable-row-detail>
+  <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>
+          <ng-container
+            *ngTemplateOutlet="
+              effectiveRowDetailTemplate;
+              context: { row: row, expanded: expanded }
+            "
+          />
+        </ng-template>
+      </ngx-datatable-row-detail>
 
-  <ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
-    [canAutoResize]="false">
-    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
-      <button type="button" class="btn btn-link text-decoration-none text-muted p-0"
-        [attr.aria-label]="expanded ? 'Collapse' : 'Expand'" (click)="toggleExpandRow(row)">
-        <i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i>
-      </button>
-    </ng-template>
-  </ngx-datatable-column>
-  }
-  @if(selectable()) {
-  <ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false"
-    [resizeable]="false">
-
-    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
-      let-selectFn="selectFn">
-      @if (selectionType() !== 'single') {
-      <div class="form-check">
-        <input class="form-check-input table-check" type="checkbox" [checked]="allRowsSelected"
-          (change)="selectFn(!allRowsSelected)" />
-      </div>
-      }
-    </ng-template>
-
-    <ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-isSelected="isSelected"
-      let-onCheckboxChangeFn="onCheckboxChangeFn">
-      @if(selectionType() === 'single') {
-      <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
-        <input class="form-check-input" type="radio" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
-      </div>
-      }
-      @if (selectionType() !== 'single') {
-      <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
-        <input class="form-check-input" type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
-      </div>
-      }
-    </ng-template>
+      <ngx-datatable-column
+        [width]="50"
+        [resizeable]="false"
+        [sortable]="false"
+        [draggable]="false"
+        [canAutoResize]="false"
+      >
+        <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
+          <button
+            type="button"
+            class="btn btn-link text-decoration-none text-muted p-0"
+            [attr.aria-label]="expanded ? 'Collapse' : 'Expand'"
+            (click)="toggleExpandRow(row)"
+          >
+            <i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i>
+          </button>
+        </ng-template>
+      </ngx-datatable-column>
+    }
+    @if (selectable()) {
+      <ngx-datatable-column
+        [width]="50"
+        [sortable]="false"
+        [canAutoResize]="false"
+        [draggable]="false"
+        [resizeable]="false"
+      >
+        <ng-template
+          ngx-datatable-header-template
+          let-value="value"
+          let-allRowsSelected="allRowsSelected"
+          let-selectFn="selectFn"
+        >
+          @if (selectionType() !== 'single') {
+            <div class="form-check">
+              <input
+                class="form-check-input table-check"
+                type="checkbox"
+                [checked]="allRowsSelected"
+                (change)="selectFn(!allRowsSelected)"
+              />
+            </div>
+          }
+        </ng-template>
 
-  </ngx-datatable-column>
-  }
-  @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {
-  <ngx-datatable-column [name]="actionsText() | abpLocalization" [maxWidth]="_actionsColumnWidth() ?? undefined"
-    [width]="_actionsColumnWidth() ?? 200" [canAutoResize]="!_actionsColumnWidth()" [sortable]="false">
-    <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
-      <ng-container
-        *ngTemplateOutlet="actionsTemplate() || gridActions; context: { $implicit: row, index: i }"></ng-container>
-      <ng-template #gridActions>
-        @if (isVisibleActions(row)) {
-        <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
-        }
-      </ng-template>
-    </ng-template>
-  </ngx-datatable-column>
-  }
-  @for (prop of propList; track prop.name; let i = $index) {
-  <ngx-datatable-column *abpVisible="prop.columnVisible(getInjected)" [width]="columnWidths()[i] ?? 200"
-    [canAutoResize]="!columnWidths()[i]"
-    [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization" [prop]="prop.name"
-    [sortable]="prop.sortable">
-    <ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
-      @if (prop.tooltip) {
-      <span [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"
-        container="body" [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
-        {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
-      </span>
-      } @else {
-      <span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
-        {{ column.name }}
-      </span>
-      }
-    </ng-template>
-    <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-      <ng-container *abpPermission="prop.permission; runChangeDetection: false">
-        <ng-container *abpVisible="row['_' + prop.name]?.visible">
-          @if (!row['_' + prop.name].component) {
-          @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
-          <div [innerHTML]="
-                  !prop.isExtra
-                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)
-                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)
-                " (click)="
-                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-                " [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div>
-          } @else {
-          <div [innerHTML]="
-                  !prop.isExtra
-                    ? (row['_' + prop.name]?.value | async)
-                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)
-                " (click)="
-                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-                " [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div>
+        <ng-template
+          ngx-datatable-cell-template
+          let-value="value"
+          let-row="row"
+          let-isSelected="isSelected"
+          let-onCheckboxChangeFn="onCheckboxChangeFn"
+        >
+          @if (selectionType() === 'single') {
+            <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
+              <input
+                class="form-check-input"
+                type="radio"
+                [checked]="isSelected"
+                (change)="onCheckboxChangeFn($event)"
+              />
+            </div>
+          }
+          @if (selectionType() !== 'single') {
+            <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
+              <input
+                class="form-check-input"
+                type="checkbox"
+                [checked]="isSelected"
+                (change)="onCheckboxChangeFn($event)"
+              />
+            </div>
           }
+        </ng-template>
+      </ngx-datatable-column>
+    }
+    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {
+      <ngx-datatable-column
+        [name]="actionsText() | abpLocalization"
+        [maxWidth]="_actionsColumnWidth() ?? undefined"
+        [width]="_actionsColumnWidth() ?? 200"
+        [canAutoResize]="!_actionsColumnWidth()"
+        [sortable]="false"
+      >
+        <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+          <ng-container
+            *ngTemplateOutlet="
+              actionsTemplate() || gridActions;
+              context: { $implicit: row, index: i }
+            "
+          ></ng-container>
+          <ng-template #gridActions>
+            @if (isVisibleActions(row)) {
+              <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
+            }
+          </ng-template>
+        </ng-template>
+      </ngx-datatable-column>
+    }
+    @for (prop of propList; track prop.name; let i = $index) {
+      <ngx-datatable-column
+        *abpVisible="prop.columnVisible(getInjected)"
+        [width]="columnWidths()[i] ?? 200"
+        [canAutoResize]="!columnWidths()[i]"
+        [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization"
+        [prop]="prop.name"
+        [sortable]="prop.sortable"
+      >
+        <ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
+          @if (prop.tooltip) {
+            <span
+              [ngbTooltip]="prop.tooltip.text | abpLocalization"
+              [placement]="prop.tooltip.placement || 'auto'"
+              container="body"
+              [class.pointer]="prop.sortable"
+              (click)="prop.sortable && sortFn(column)"
+            >
+              {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
+            </span>
           } @else {
-          <ng-container *ngComponentOutlet="
-                  row['_' + prop.name].component;
-                  injector: row['_' + prop.name].injector
-                "></ng-container>
+            <span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
+              {{ column.name }}
+            </span>
           }
-        </ng-container>
-      </ng-container>
-    </ng-template>
-  </ngx-datatable-column>
-  }
-</ngx-datatable>
-}
\ No newline at end of file
+        </ng-template>
+        <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
+          <ng-container *abpPermission="prop.permission; runChangeDetection: false">
+            <ng-container *abpVisible="row['_' + prop.name]?.visible">
+              @if (!row['_' + prop.name].component) {
+                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
+                  <div
+                    [innerHTML]="
+                      !prop.isExtra
+                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)
+                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)
+                          | abpLocalization)
+                    "
+                    (click)="
+                      prop.action &&
+                        prop.action({ getInjected: getInjected, record: row, index: i })
+                    "
+                    [class]="entityPropTypeClasses[prop.type]"
+                    [class.pointer]="prop.action"
+                  ></div>
+                } @else {
+                  <div
+                    [innerHTML]="
+                      !prop.isExtra
+                        ? (row['_' + prop.name]?.value | async)
+                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)
+                    "
+                    (click)="
+                      prop.action &&
+                        prop.action({ getInjected: getInjected, record: row, index: i })
+                    "
+                    [class]="entityPropTypeClasses[prop.type]"
+                    [class.pointer]="prop.action"
+                  ></div>
+                }
+              } @else {
+                <ng-container
+                  *ngComponentOutlet="
+                    row['_' + prop.name].component;
+                    injector: row['_' + prop.name].injector
+                  "
+                ></ng-container>
+              }
+            </ng-container>
+          </ng-container>
+        </ng-template>
+      </ngx-datatable-column>
+    }
+  </ngx-datatable>
+}
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 81b9bdfc18..d4149f43e4 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
@@ -16,7 +16,7 @@ import {
   ViewChild,
   input,
   effect,
-  output
+  output,
 } from '@angular/core';
 import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 
@@ -77,12 +77,14 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   ],
   templateUrl: './extensible-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [`
-    :host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail {
-      background: none;
-      padding: 0;
-    }
-  `],
+  styles: [
+    `
+      :host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail {
+        background: none;
+        padding: 0;
+      }
+    `,
+  ],
 })
 export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestroy {
   readonly #injector = inject(Injector);
@@ -101,10 +103,14 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
   readonly dataInput = input<R[]>([], { alias: 'data' });
   readonly list = input.required<ListService>();
   readonly recordsTotal = input.required<number>();
-  readonly actionsColumnWidthInput = input<number | undefined>(undefined, { alias: 'actionsColumnWidth' });
+  readonly actionsColumnWidthInput = input<number | undefined>(undefined, {
+    alias: 'actionsColumnWidth',
+  });
   readonly actionsTemplate = input<TemplateRef<any> | undefined>(undefined);
   readonly selectable = input(false);
-  readonly selectionTypeInput = input<SelectionType | string>(SelectionType.multiClick, { alias: 'selectionType' });
+  readonly selectionTypeInput = input<SelectionType | string>(SelectionType.multiClick, {
+    alias: 'selectionType',
+  });
   readonly selected = input<any[]>([]);
   readonly infiniteScroll = input(false);
   readonly isLoading = input(false);
@@ -199,36 +205,38 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
         this.list().totalCount = this.recordsTotal();
       }
 
-      this._data.set(dataValue.map((record: any, index: number) => {
-        this.propList.forEach(prop => {
-          const propData = { getInjected: this.getInjected, record, index } as ReadonlyPropData;
-          const value = this.getContent(prop.value, propData);
-
-          const propKey = `_${prop.value.name}`;
-          record[propKey] = {
-            visible: prop.value.visible(propData),
-            value,
-          };
-          if (prop.value.component) {
-            record[propKey].injector = Injector.create({
-              providers: [
-                {
-                  provide: PROP_DATA_STREAM,
-                  useValue: value,
-                },
-                {
-                  provide: ROW_RECORD,
-                  useValue: record,
-                },
-              ],
-              parent: this.#injector,
-            });
-            record[propKey].component = prop.value.component;
-          }
-        });
-
-        return record;
-      }));
+      this._data.set(
+        dataValue.map((record: any, index: number) => {
+          this.propList.forEach(prop => {
+            const propData = { getInjected: this.getInjected, record, index } as ReadonlyPropData;
+            const value = this.getContent(prop.value, propData);
+
+            const propKey = `_${prop.value.name}`;
+            record[propKey] = {
+              visible: prop.value.visible(propData),
+              value,
+            };
+            if (prop.value.component) {
+              record[propKey].injector = Injector.create({
+                providers: [
+                  {
+                    provide: PROP_DATA_STREAM,
+                    useValue: value,
+                  },
+                  {
+                    provide: ROW_RECORD,
+                    useValue: record,
+                  },
+                ],
+                parent: this.#injector,
+              });
+              record[propKey].component = prop.value.component;
+            }
+          });
+
+          return record;
+        }),
+      );
     });
   }
 
@@ -333,10 +341,12 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
 
   ngAfterViewInit(): void {
     if (!this.infiniteScroll()) {
-      this.list()?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
-        this._data.set([]);
-        this.cdr.markForCheck();
-      });
+      this.list()
+        ?.requestStatus$?.pipe(filter(status => status === 'loading'))
+        .subscribe(() => {
+          this._data.set([]);
+          this.cdr.markForCheck();
+        });
     }
   }
 
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts b/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
index a5882ab8e1..bda65957a6 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
@@ -9,9 +9,8 @@ import { ExtensionsService } from '../services/extensions.service';
 import { EXTENSIONS_IDENTIFIER } from '../tokens/extensions.token';
 
 export function generateFormFromProps<R = any>(propData: PropData<R>) {
-  // Use .data to get resolved values (handles InputSignal)
   const data: ReadonlyPropData<R> = propData.data;
-  
+
   const extensions = data.getInjected(ExtensionsService<R>);
   const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
 
@@ -36,7 +35,7 @@ export function generateFormFromProps<R = any>(propData: PropData<R>) {
       value = record[name];
     }
 
-    if (typeof value === 'undefined') value = prop.defaultValue;
+    if (typeof value === 'undefined') value = prop.defaultValue as any;
 
     if (value) {
       let adapter: DateAdapter | TimeAdapter | DateTimeAdapter;
@@ -68,4 +67,3 @@ export function generateFormFromProps<R = any>(propData: PropData<R>) {
 
   return form;
 }
-
diff --git a/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts b/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
index 259d2f76a1..b341879995 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, effect, inject, input, signal, ElementRef, Renderer2 } from '@angular/core';
+import { Directive, effect, inject, input, ElementRef, Renderer2 } from '@angular/core';
 
 // TODO: improve this type
 export interface FreeTextType {
@@ -22,7 +22,9 @@ export class FreeTextInputDirective {
   private readonly elRef = inject(ElementRef);
   private readonly renderer = inject(Renderer2);
 
-  readonly feature = input<FreeTextType | undefined>(undefined, { alias: 'abpFeatureManagementFreeText' });
+  readonly feature = input<FreeTextType | undefined>(undefined, {
+    alias: 'abpFeatureManagementFreeText',
+  });
 
   constructor() {
     effect(() => {

From d27539af8c0881953662ba6d150753eca9292df5 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Wed, 4 Feb 2026 13:52:39 +0300
Subject: [PATCH 10/10] add: comments for the extensibility models

---
 .../packages/components/extensible/src/lib/models/actions.ts    | 2 +-
 .../packages/components/extensible/src/lib/models/props.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 3de746e316..ed2986f81c 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
@@ -15,13 +15,13 @@ export abstract class ActionData<R = any> {
   get data(): ReadonlyActionData<R> {
     return {
       getInjected: this.getInjected,
+      // `record` / `index` may be signals; always use `data.record` / `data.index`.
       index: isSignal(this.index) ? this.index() : this.index,
       record: isSignal(this.record) ? this.record() : this.record,
     };
   }
 }
 
-
 export type ReadonlyActionData<R = any> = Readonly<{
   getInjected: <T>(
     token: Type<T> | InjectionToken<T>,
diff --git a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
index 98f74d58aa..0b9a55209a 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/models/props.ts
@@ -17,6 +17,7 @@ export abstract class PropData<R = any> {
   get data(): ReadonlyPropData<R> {
     return {
       getInjected: this.getInjected,
+      // `record` / `index` may be signals; always use `data.record` / `data.index`.
       index: isSignal(this.index) ? this.index() : this.index,
       record: isSignal(this.record) ? this.record() : this.record,
     };
@@ -55,7 +56,6 @@ export type PropCallback<T, R = any> = (data: ReadonlyPropData<T>, auxData?: any
 export type PropPredicate<T> = (data?: ReadonlyPropData<T>, auxData?: any) => boolean;
 export type PropDisplayTextResolver<T> = (data?: ReadonlyPropData<T>) => string;
 
-
 export abstract class PropsFactory<C extends Props<any>> {
   protected abstract _ctor: Type<C>;
   private contributorCallbacks: PropContributorCallbacks<InferredPropList<C>> = {};