introduce column property to access the new width after resizing

fixes #70
fixes #126

projects/angular2-smart-table/src/lib/components/thead/rows/thead-titles-row.component.ts

@@ -13,7 +13,7 @@ import {Column} from "../../../lib/data-set/column";
       <input type="checkbox" [ngModel]="isAllSelected" (click)="selectAllRows.emit()">
     </th>
     <th angular2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
-    <th *ngFor="let column of getVisibleColumns(grid.getColumns())"
+    <th *ngFor="let column of visibleColumns; index as i; last as isLast"
         class="angular2-smart-th {{ column.id }}"
         [ngClass]="column.classHeader ?? ''"
         [style.width]="column.width"
@@ -24,7 +24,10 @@ import {Column} from "../../../lib/data-set/column";
         [isHideable]="isHideable"
         (hide)="hide.emit($event)"
       ></angular2-st-column-title>
-      <div *ngIf="isResizable" angular2-resizer class="angular2-resizer-block"></div>
+      <div *ngIf="isResizable && (showActionColumnRight || !isLast)"
+           [angular2SmartTableResizer]="{column: column, siblingColumn: isLast ? undefined : visibleColumns[i+1]}"
+           class="angular2-resizer-block"
+      ></div>
     </th>
     <th angular2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
   `,
@@ -54,7 +57,7 @@ export class TheadTitlesRowComponent implements OnChanges {
     this.isHideable = this.grid.getSetting('hideable');
   }
 
-  getVisibleColumns(columns: Array<Column>): Array<Column> {
-    return (columns || []).filter((column: Column) => !column.hide);
+  get visibleColumns(): Array<Column> {
+    return (this.grid.getColumns() || []).filter((column: Column) => !column.hide);
   }
 }

projects/angular2-smart-table/src/lib/directives/resizer.directive.ts

@@ -1,21 +1,24 @@
-import {Directive, ElementRef, HostListener, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {Directive, ElementRef, HostListener, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
 import {Subject} from 'rxjs';
 import {filter, takeUntil} from 'rxjs/operators';
 
 import {TableService} from '../services/table.service';
+import {Column} from "../lib/data-set/column";
 
 @Directive({
-  selector: '[angular2-resizer]'
+  selector: '[angular2SmartTableResizer]'
 })
 export class NgxResizerDirective implements OnInit, OnDestroy {
+  @Input() angular2SmartTableResizer!: {column: Column, siblingColumn: Column | undefined};
+
   isClicked!: boolean;
 
   parentElement: any;
   siblingElement: any;
 
-  pointerOffset!: number;
-  parentOffset!: number;
-  siblingOffset!: number;
+  pointerOffset: number = 0;
+  parentOffset: number = 0;
+  siblingOffset: number | undefined = undefined;
 
   destroyed$ = new Subject<any>();
 
@@ -31,8 +34,15 @@ export class NgxResizerDirective implements OnInit, OnDestroy {
       .subscribe((event: MouseEvent) => {
         const offset = this.pointerOffset - event.pageX;
         const width = this.parentOffset - offset;
+        this.angular2SmartTableResizer.column.resizedWidth = width;
         this.renderer.setStyle(this.parentElement, 'width', width + 'px');
-        this.renderer.setStyle(this.siblingElement, 'width', this.siblingOffset + offset + 'px');
+
+        const siblingColumn = this.angular2SmartTableResizer.siblingColumn;
+        if (siblingColumn !== undefined && this.siblingOffset !== undefined) {
+          const siblingWidth = this.siblingOffset + offset;
+          siblingColumn.resizedWidth = siblingWidth;
+          this.renderer.setStyle(this.siblingElement, 'width', siblingWidth + 'px');
+        }
       });
   }
 
@@ -43,7 +53,7 @@ export class NgxResizerDirective implements OnInit, OnDestroy {
     this.pointerOffset = event.pageX;
 
     this.parentOffset = this.parentElement.offsetWidth;
-    this.siblingOffset = this.siblingElement.offsetWidth;
+    this.siblingOffset = this.siblingElement?.offsetWidth;
   }
 
   @HostListener('document:mouseup') onMouseDown() {

projects/angular2-smart-table/src/lib/lib/data-set/column.ts

@@ -18,6 +18,16 @@ export class Column implements IColumn {
   classHeader?: string = '';
   classContent?: string = '';
   width?: string = '';
+  /**
+   * If this column was resized, this contains the new width in pixels.
+   * Please be aware that this only contains the width specified in the width
+   * CSS attribute. It does NOT necessarily equal the actual width of the column
+   * unless the table-layout is fixed.
+   * Also note carefully that in automatic table layouts the actual width of other columns,
+   * that are not adjacent to the resized column, may also change. Those changes are not
+   * reflected by this property.
+   */
+  resizedWidth?: number = undefined;
   isSortable?: boolean = true;
   isEditable?: boolean = true;
   isAddable?: boolean = true;