From a7b9f32a77f4bee234ce47efd504f629ca94efa6 Mon Sep 17 00:00:00 2001
From: chintankavathia <chintankumar.kavathia@siemens.com>
Date: Thu, 11 Jun 2026 14:08:21 +0530
Subject: [PATCH] feat(summary-row): support providing custom animation class

added `summaryRowAnimateEnter` and `summaryRowAnimateLeave` input which can be used to provide custom class for angular's `[animate.enter]` and `[animate.leave]` transitions on summary row.
---
 .../src/lib/components/body/body.component.ts        |  6 ++++++
 .../src/lib/components/datatable.component.html      |  2 ++
 .../src/lib/components/datatable.component.ts        | 12 ++++++++++++
 3 files changed, 20 insertions(+)

diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
index 68f57eaec..26ae8a1b8 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -107,6 +107,8 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
             [rows]="rows"
             [columns]="columns"
             [template]="summaryRowTemplate()"
+            [animate.enter]="summaryRowAnimateEnter()"
+            [animate.leave]="summaryRowAnimateLeave()"
           />
         }
         <ng-template
@@ -242,6 +244,8 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
           [rows]="rows"
           [columns]="columns"
           [template]="summaryRowTemplate()"
+          [animate.enter]="summaryRowAnimateEnter()"
+          [animate.leave]="summaryRowAnimateLeave()"
         />
       }
     }
@@ -295,6 +299,8 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
   readonly summaryPosition = input.required<string>();
   readonly summaryHeight = input.required<number>();
   readonly summaryRowTemplate = input<TemplateRef<void>>();
+  readonly summaryRowAnimateEnter = input<string>();
+  readonly summaryRowAnimateLeave = input<string>();
   readonly rowDraggable = input<boolean>();
   readonly rowDragEvents = input.required<OutputEmitterRef<DragEventData>>();
   readonly disableRowCheck = input<(row: TRow) => boolean | undefined>();
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html
index c0865d26f..8402ae593 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.html
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.html
@@ -60,6 +60,8 @@
       [summaryHeight]="summaryHeight()"
       [summaryPosition]="summaryPosition()"
       [summaryRowTemplate]="summaryRowDirective()?.template"
+      [summaryRowAnimateEnter]="summaryRowAnimateEnter()"
+      [summaryRowAnimateLeave]="summaryRowAnimateLeave()"
       [verticalScrollVisible]="verticalScrollVisible"
       [ariaRowCheckboxMessage]="messages().ariaRowCheckboxMessage ?? 'Select row'"
       [ariaGroupHeaderCheckboxMessage]="
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
index bfe2ed77f..45319d5db 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.ts
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -397,6 +397,18 @@ export class DatatableComponent<TRow extends Row = any>
    */
   readonly summaryPosition = input('top');
 
+  /**
+   * CSS class to apply when the summary row enters (appears).
+   * Use this to customize the enter animation.
+   */
+  readonly summaryRowAnimateEnter = input<string>();
+
+  /**
+   * CSS class to apply when the summary row leaves (disappears).
+   * Use this to customize the leave animation.
+   */
+  readonly summaryRowAnimateLeave = input<string>();
+
   /**
    * A function you can use to check whether you want
    * to disable a row. Example: