Use signal-based inputs and sync modal visibility

Replace classic @Input properties with Angular signal-based inputs (input()) for providerName, providerKey, hideBadges, entityDisplayName and visible; add corresponding output signal for visibleChange. Provide getter/setter overrides to preserve runtime assignment compatibility. Update template to call entityDisplayName() as a signal. Add a constructor effect that reacts to visibleInput changes to open/init or close the modal and keep internal _visible state in sync. Also adjust imports to include effect, input, output and untracked.

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>

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -18,13 +18,15 @@ import {
   Component,
   computed,
   DOCUMENT,
+  effect,
   ElementRef,
   inject,
-  Input,
+  input,
   output,
   QueryList,
   signal,
   TrackByFunction,
+  untracked,
   ViewChildren,
 } from '@angular/core';
 import { concat, of } from 'rxjs';
@@ -112,11 +114,12 @@ export class PermissionManagementComponent {
   protected readonly toasterService = inject(ToasterService);
   private document = inject(DOCUMENT);
 
-  // Classic inputs for ReplaceableTemplateDirective compatibility
-  @Input() providerName!: string;
-  @Input() providerKey!: string;
-  @Input() hideBadges = false;
-  @Input() entityDisplayName?: string;
+
+  readonly providerNameInput = input('', { alias: 'providerName' });
+  readonly providerKeyInput = input('', { alias: 'providerKey' });
+  readonly hideBadgesInput = input(false, { alias: 'hideBadges' });
+  readonly entityDisplayName = input<string | undefined>(undefined);
+  readonly visibleInput = input(false, { alias: 'visible' });
 
   // Output signals
   readonly visibleChange = output<boolean>();
@@ -124,6 +127,31 @@ export class PermissionManagementComponent {
   // Internal state
   protected readonly _visible = signal(false);
 
+  // Backward-compatible getters/setters for ReplaceableTemplateDirective.
+  private _providerNameOverride?: string;
+  get providerName(): string {
+    return this._providerNameOverride ?? this.providerNameInput();
+  }
+  set providerName(value: string) {
+    this._providerNameOverride = value;
+  }
+
+  private _providerKeyOverride?: string;
+  get providerKey(): string {
+    return this._providerKeyOverride ?? this.providerKeyInput();
+  }
+  set providerKey(value: string) {
+    this._providerKeyOverride = value;
+  }
+
+  private _hideBadgesOverride?: boolean;
+  get hideBadges(): boolean {
+    return this._hideBadgesOverride ?? this.hideBadgesInput();
+  }
+  set hideBadges(value: boolean) {
+    this._hideBadgesOverride = value;
+  }
+
   @ViewChildren('selectAllInThisTabsRef')
   selectAllInThisTabsRef!: QueryList<ElementRef<HTMLInputElement>>;
   @ViewChildren('selectAllInAllTabsRef')
@@ -178,8 +206,7 @@ export class PermissionManagementComponent {
 
   trackByFn: TrackByFunction<PermissionGroupDto> = (_, item) => item.name;
 
-  // Getter/setter for visible - used by ReplaceableTemplateDirective
-  @Input()
+  // Getter/setter for visible - used by ReplaceableTemplateDirective and internal code
   get visible(): boolean {
     return this._visible();
   }
@@ -207,7 +234,29 @@ export class PermissionManagementComponent {
     }
   }
 
-
+  constructor() {
+    effect(() => {
+      const inputValue = this.visibleInput();
+      untracked(() => {
+        if (this._visible() !== inputValue) {
+          if (inputValue) {
+            this.openModal().subscribe(() => {
+              this._visible.set(true);
+              concat(this.selectAllInAllTabsRef.changes, this.selectAllInThisTabsRef.changes)
+                .pipe(take(1))
+                .subscribe(() => {
+                  this.initModal();
+                });
+            });
+          } else {
+            this.setSelectedGroup(null);
+            this._visible.set(false);
+            this.filter.set('');
+          }
+        }
+      });
+    });
+  }
 
   getChecked(name: string) {
     return (this.permissions.find(per => per.name === name) || { isGranted: false }).isGranted;