fix(grid-lite): actually emit outputs

Author: damyanpetev

projects/igniteui-angular/grids/lite/src/grid-lite.component.html

@@ -6,10 +6,10 @@
   [dataPipelineConfiguration]="dataPipelineConfiguration()"
   [sortingExpressions]="_sortingExpressions()"
   [filterExpressions]="_filteringExpressions()"
-  (sorting)="(sorting)"
-  (sorted)="(sorted)"
-  (filtering)="(filtering)"
-  (filtered)="(filtered)"
+  (sorting)="onSorting($any($event))"
+  (sorted)="onSorted($any($event))"
+  (filtering)="onFiltering($any($event))"
+  (filtered)="onFiltered($any($event))"
 >
   <ng-content></ng-content>
 </igc-grid-lite>

projects/igniteui-angular/grids/lite/src/grid-lite.component.ts

@@ -212,6 +212,28 @@ export class IgxGridLiteComponent<T extends object = any> implements OnInit {
 
     //#endregion
 
+    //#region Event handlers
 
+    protected onSorting(event: CustomEvent<SortingExpression<T>>): void {
+        event.stopPropagation();
+        this.sorting.emit(event);
+    }
+
+    protected onSorted(event: CustomEvent<SortingExpression<T>>): void {
+        event.stopPropagation();
+        this.sorted.emit(event);
+    }
+
+    protected onFiltering(event: CustomEvent<FilterExpression<T>>): void {
+        event.stopPropagation();
+        this.filtering.emit(event);
+    }
+
+    protected onFiltered(event: CustomEvent<FilterExpression<T>>): void {
+        event.stopPropagation();
+        this.filtered.emit(event);
+    }
+
+    //#endregion
 
 }

src/app/grid-lite/grid-lite.sample.html

@@ -4,6 +4,10 @@
   [autoGenerate]="false"
   [sortingOptions]="sortingOptions"
   [sortingExpressions]="sortingExpressions"
+  (sorting)="logEvent('sorting', $event)"
+  (sorted)="logEvent('sorted', $event)"
+  (filtering)="logEvent('filtering', $event)"
+  (filtered)="logEvent('filtered', $event)"
 >
   <igx-grid-lite-column
     field="firstName"

src/app/grid-lite/grid-lite.sample.ts

@@ -35,4 +35,8 @@ export class GridLiteSampleComponent {
     constructor() {
         this.data = this.dataService.generateUsers(10);
     }
+
+    protected logEvent(name: string, event: any) {
+        console.log(name, event);
+    }
 }