row expand button event handling added

libs/datatable/src/components/row/row.component.html

@@ -6,7 +6,7 @@
     [class.selected]="selected"
     [class.clickable]="dataTable.selectOnRowClick">
   <td [hide]="!dataTable.expandColumnVisible">
-    <button (click)="expanded = !expanded; $event.stopPropagation()" class="row-expand-button"
+    <button (click)="expandButtonClicked()" class="row-expand-button"
          [attr.aria-expanded]="expanded"
          [title]="dataTable.labels.expandRow.replace('{cell_content}', ''+item[dataTable.primaryColumn])"
          [attr.aria-label]="dataTable.labels.expandRow.replace('{cell_content}', ''+item[dataTable.primaryColumn])">

libs/datatable/src/components/row/row.component.ts

@@ -32,6 +32,7 @@ export class DataTableRowComponent implements OnInit, OnDestroy {
   private _selected: boolean;
 
   @Output() selectedChange = new EventEmitter();
+  @Output() rowExpandEvent = new EventEmitter();
 
   get selected() {
     return this._selected;
@@ -42,6 +43,11 @@ export class DataTableRowComponent implements OnInit, OnDestroy {
     this.selectedChange.emit(selected);
   }
 
+  expandButtonClicked(){
+    this.expanded = !this.expanded;
+    this.rowExpandEvent.emit(this.expanded);
+  }
+
   // other:
   get displayIndex() {
     if (this.dataTable.pagination) {

libs/datatable/src/components/table/table.component.html

@@ -69,7 +69,7 @@
       </tr>
       </thead>
       <tbody *ngFor="let item of items; let index=index" class="data-table-row-wrapper"
-             dataTableRow #row [item]="item" [index]="index" (selectedChange)="onRowSelectChanged(row)">
+             dataTableRow #row [item]="item" [index]="index" (selectedChange)="onRowSelectChanged(row)" (rowExpandEvent)="onRowExpandButtonClicked(row,$event)">
       </tbody>
       <tbody *ngIf="itemCount === 0 && noDataMessage">
         <tr>

libs/datatable/src/components/table/table.component.ts

@@ -94,6 +94,8 @@ export class DataTableComponent implements DataTableParams, OnInit, AfterContent
   @Output() rowDoubleClick = new EventEmitter();
   @Output() headerClick = new EventEmitter();
   @Output() cellClick = new EventEmitter();
+  @Output() rowExpandButtonClick = new EventEmitter();
+
   // UI state without input:
   indexColumnVisible: boolean;
   selectColumnVisible: boolean;
@@ -219,7 +221,7 @@ export class DataTableComponent implements DataTableParams, OnInit, AfterContent
       this.limit = this.pageLimits[0];
     }
 
-    this.labels = {...defaultTranslations, ...this.labels};
+    this.labels = { ...defaultTranslations, ...this.labels };
 
     if (this.autoReload) {
       this.reloadItems();
@@ -273,25 +275,25 @@ export class DataTableComponent implements DataTableParams, OnInit, AfterContent
   constructor() { }
 
   public rowClicked(row: DataTableRowComponent, event: Event) {
-    this.rowClick.emit({row, event});
+    this.rowClick.emit({ row, event });
   }
 
   public rowDoubleClicked(row: DataTableRowComponent, event: Event) {
-    this.rowDoubleClick.emit({row, event});
+    this.rowDoubleClick.emit({ row, event });
   }
 
   public headerClicked(column: DataTableColumnDirective, event: Event) {
     if (!this._resizeInProgress) {
       event.preventDefault();
       event.stopPropagation();
-      this.headerClick.emit({column, event});
+      this.headerClick.emit({ column, event });
     } else {
       this._resizeInProgress = false; // this is because I can't prevent click from mousup of the drag end
     }
   }
 
   private cellClicked(column: DataTableColumnDirective, row: DataTableRowComponent, event: MouseEvent) {
-    this.cellClick.emit({row, column, event});
+    this.cellClick.emit({ row, column, event });
   }
 
   // functions:
@@ -364,6 +366,7 @@ export class DataTableComponent implements DataTableParams, OnInit, AfterContent
       }
     }
 
+
     // unselect all other rows:
     if (row.selected && !this.multiSelect) {
       this.rows.toArray().filter(row_ => row_.selected).forEach(row_ => {
@@ -374,10 +377,16 @@ export class DataTableComponent implements DataTableParams, OnInit, AfterContent
     }
   }
 
+
+  onRowExpandButtonClicked(row: DataTableRowComponent, statusOfRow: Boolean) {
+    this.rowExpandButtonClick.emit({ row: row, status: statusOfRow });
+  }
+
+
   // other:
 
   get substituteItems() {
-    return Array.from({length: this.displayParams.limit - this.items.length});
+    return Array.from({ length: this.displayParams.limit - this.items.length });
   }
 
   private resizeColumnStart(event: MouseEvent, column: DataTableColumnDirective, columnElement: HTMLElement) {
@@ -399,7 +408,7 @@ export class DataTableComponent implements DataTableParams, OnInit, AfterContent
          that offsetWidth sometimes contains out-of-date values. */
     if ((dx < 0 && (columnElement.offsetWidth + dx) <= this.resizeLimit) ||
       !columnElement.nextElementSibling || // resizing doesn't make sense for the last visible column
-      (dx >= 0 && ((<HTMLElement> columnElement.nextElementSibling).offsetWidth + dx) <= this.resizeLimit)) {
+      (dx >= 0 && ((<HTMLElement>columnElement.nextElementSibling).offsetWidth + dx) <= this.resizeLimit)) {
       return false;
     }
     return true;