Merge pull request #19170 from abpframework/action-button

Add showOnlyIcon attribute to single action button

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

@@ -41,26 +41,28 @@
 </ng-template>
 
 <ng-template #buttonContentTmp let-action>
-  <i [ngClass]="action.icon" [class.me-1]="action.icon"></i>
-  @if (action.icon) {
-  <span>{{ action.text | abpLocalization }}</span>
-  }@else {
-  <div abpEllipsis>{{ action.text | abpLocalization }}</div>
+  <i [ngClass]="action.icon" [class.me-1]="action.icon && !action.showOnlyIcon"></i>
+  @if (!action.showOnlyIcon) {
+    @if (action.icon) {
+      <span>{{ action.text | abpLocalization }}</span>
+    } @else {
+      <div abpEllipsis>{{ action.text | abpLocalization }}</div>
+    }
   }
 </ng-template>
 
 <ng-template #btnTmp let-action>
   @if (action.visible(data)) {
-  <button
-    *abpPermission="action.permission; runChangeDetection: false"
-    (click)="action.action(data)"
-    type="button"
-    [class]="action.btnClass"
-    [style]="action.btnStyle"
-  >
-    <ng-container
-      *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
-    ></ng-container>
-  </button>
+    <button
+      *abpPermission="action.permission; runChangeDetection: false"
+      (click)="action.action(data)"
+      type="button"
+      [class]="action.btnClass"
+      [style]="action.btnStyle"
+    >
+      <ng-container
+        *ngTemplateOutlet="buttonContentTmp; context: { $implicit: action }"
+      ></ng-container>
+    </button>
   }
 </ng-template>

npm/ng-packs/packages/components/extensible/src/lib/models/entity-actions.ts

@@ -24,6 +24,7 @@ export class EntityAction<R = any> extends Action<R> {
   readonly icon: string;
   readonly btnClass?: string;
   readonly btnStyle?: string;
+  readonly showOnlyIcon?: boolean;
 
   constructor(options: EntityActionOptions<R>) {
     super(options.permission || '', options.visible, options.action);
@@ -31,6 +32,7 @@ export class EntityAction<R = any> extends Action<R> {
     this.icon = options.icon || '';
     this.btnClass = options.btnClass || 'btn btn-primary text-center';
     this.btnStyle = options.btnStyle;
+    this.showOnlyIcon = options.showOnlyIcon || false;
   }
 
   static create<R = any>(options: EntityActionOptions<R>) {