Merge pull request #18150 from abpframework/masum/extensible-table-issue

Fix extensible table abpVisible directive bug

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -44,7 +44,7 @@
       </ng-template>
       <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
         <ng-container *abpPermission="prop.permission; runChangeDetection: false">
-          <ng-container *ngIf="row['_' + prop.name]?.visible">
+          <ng-container *abpVisible="row['_' + prop.name]?.visible">
             <div
               *ngIf="!row['_' + prop.name].component; else component"
               [innerHTML]="row['_' + prop.name]?.value | async"

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -8,13 +8,12 @@ import {
   ListService,
   PermissionService,
 } from '@abp/ng.core';
-import { CommonModule, formatDate } from '@angular/common';
+import { formatDate } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   inject,
-  Inject,
   Injector,
   Input,
   LOCALE_ID,
@@ -39,7 +38,11 @@ import {
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GridActionsComponent } from '../grid-actions/grid-actions.component';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { NgxDatatableDefaultDirective, NgxDatatableListDirective } from '@abp/ng.theme.shared';
+import {
+  AbpVisibleDirective,
+  NgxDatatableDefaultDirective,
+  NgxDatatableListDirective,
+} from '@abp/ng.theme.shared';
 
 const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
 
@@ -49,6 +52,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   standalone: true,
   imports: [
     CoreModule,
+    AbpVisibleDirective,
     NgxDatatableModule,
     GridActionsComponent,
     NgbTooltip,

npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts

@@ -2,6 +2,7 @@ import { OnInit, Directive, OnDestroy, Input, ViewContainerRef, TemplateRef } fr
 import { EMPTY, from, Observable, of, Subscription } from 'rxjs';
 
 @Directive({
+  standalone: true,
   selector: '[abpVisible]',
 })
 export class AbpVisibleDirective implements OnDestroy, OnInit {

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -54,7 +54,6 @@ const declarationsWithExports = [
   ToastContainerComponent,
   LoadingDirective,
   ModalCloseDirective,
-  AbpVisibleDirective,
   FormInputComponent,
   FormCheckboxComponent,
 ];
@@ -70,7 +69,8 @@ const declarationsWithExports = [
     PasswordComponent,
     NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
-    DisabledDirective
+    DisabledDirective,
+    AbpVisibleDirective,
   ],
   declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
   exports: [
@@ -78,6 +78,7 @@ const declarationsWithExports = [
     NgxValidateCoreModule,
     CardModule,
     DisabledDirective,
+    AbpVisibleDirective,
     NgxDatatableListDirective,
     NgxDatatableDefaultDirective,
     ...declarationsWithExports,