From 0e512083331b094a1593e9b1f081ff441db01786 Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Tue, 6 Feb 2018 16:58:19 +0000
Subject: [PATCH] emit "sorting-changed" DOM event (DataTable) (#2916)

---
 docs/datatable.component.md                   |  1 +
 .../datatable/datatable.component.spec.ts     | 21 +++++++++++++++++++
 .../datatable/datatable.component.ts          | 12 +++++++++++
 3 files changed, 34 insertions(+)

diff --git a/docs/datatable.component.md b/docs/datatable.component.md
index f86ea0fcde..5699af82c2 100644
--- a/docs/datatable.component.md
+++ b/docs/datatable.component.md
@@ -172,6 +172,7 @@ These events bubble up the component tree and can be handled by any parent compo
 | row-select | Raised after user selects a row |
 | row-unselect | Raised after user unselects a row |
 | row-keyup | Raised on the 'keyup' event for the focused row. |
+| sorting-changed | Raised after user clicks the sortable column header. |
 
 For example:
 
diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts
index 7bba94a9c2..82bdba5d4c 100644
--- a/lib/core/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.spec.ts
@@ -51,6 +51,27 @@ describe('DataTable', () => {
         element = fixture.debugElement.nativeElement;
     });
 
+    it('should emit "sorting-changed" DOM event', (done) => {
+        const column = new ObjectDataColumn({ key: 'name', sortable: true, direction: 'asc' });
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [ column ]
+        );
+        dataTable.data.setSorting(new DataSorting('name', 'desc'));
+
+        fixture.nativeElement.addEventListener('sorting-changed', (event: CustomEvent) => {
+            expect(event.detail.key).toBe('name');
+            expect(event.detail.direction).toBe('asc');
+            done();
+        });
+
+        dataTable.ngOnChanges({});
+        dataTable.onColumnHeaderClick(column);
+    });
+
     it('should change the rows on changing of the data', () => {
         let newData = new ObjectDataTableAdapter(
             [
diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts
index 50560ffe61..073ce745e7 100644
--- a/lib/core/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/datatable/components/datatable/datatable.component.ts
@@ -369,6 +369,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
                 newDirection = current.direction === 'asc' ? 'desc' : 'asc';
             }
             this.data.setSorting(new DataSorting(column.key, newDirection));
+            this.emitSortingChangedEvent(column.key, newDirection);
         }
     }
 
@@ -519,4 +520,15 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         });
         this.elementRef.nativeElement.dispatchEvent(domEvent);
     }
+
+    private emitSortingChangedEvent(key: string, direction: string) {
+        const domEvent = new CustomEvent('sorting-changed', {
+            detail: {
+                key,
+                direction
+            },
+            bubbles: true
+        });
+        this.elementRef.nativeElement.dispatchEvent(domEvent);
+    }
 }