emit "sorting-changed" DOM event (DataTable) (#2916)

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:
 

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(
             [

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);
+    }
 }