Universal support for DimensionsHelper and ScrollbarHelper

docs/universal/server-side-rendering.md

@@ -0,0 +1,98 @@
+
+To run ngx-datatable on a server using Angular Universal you must implement 2 services. Below are examples of these
+services:
+
+1. DimensionsHelper
+2. ScrollbarHelper
+
+
+If you take the default implementation of these 2 services they do not work on server for valid reasons. There is no viewport on server and there is no scrollbar on server.  If you take these services as they are you will get an error like this:
+
+```
+ this.document.createElement is not a function
+          at ScrollbarHelper.getWidth
+```
+
+```
+ERROR TypeError: this.element.getBoundingClientRect is not a function
+```
+
+## Example Server side Dimensions helper
+
+This service must send back the dimensions of the grid or fallback to a default width. 
+
+I am using the ideas about dimensions from client hints that I set on the signin page.    http://httpwg.org/http-extensions/client-hints.html
+
+
+```typescript
+import { ScrollbarHelper } from '@swimlane/ngx-datatable';
+import { Injectable, Inject } from '@angular/core';
+import { Request } from 'express';
+import { REQUEST } from '@nguniversal/express-engine/tokens';
+import { DimensionsHelper } from '@swimlane/ngx-datatable';
+
+@Injectable()
+export class ServerDimensionsHelper extends DimensionsHelper {
+
+    constructor(@Inject(REQUEST) private request: Request) {
+        super();
+    }
+
+    getDimensions(element: Element): ClientRect {
+        const width = parseInt(this.request.cookies['CH-DW'], 10) || 1000;
+        const height = parseInt(this.request.cookies['CH-DH'], 10) || 800;
+
+        const adjustedWidth = width;
+        const adjustedHeight = height;
+
+
+        return {
+            height: adjustedHeight,
+            bottom: 0,
+            top: 0,
+            width: adjustedWidth,
+            left: 0,
+            right: 0
+        };
+    }
+}
+```
+
+
+## Scrollbar helper 
+
+In this case I just returned the scrollbar width based on what I used for css styling
+
+```typescript
+import { ScrollbarHelper } from '@swimlane/ngx-datatable';
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable()
+export class ServerScrollBarHelper extends ScrollbarHelper {
+    width: number;
+
+    constructor(@Inject(DOCUMENT) document) {
+        super(document);
+        this.width = 16; // use default value
+    }
+
+    getWidth(): number {
+        return this.width;
+    }
+}
+```
+
+I then added these two services using @NgModule providers
+
+```typescript
+  providers:  [  {
+    provide: ScrollbarHelper,
+    useClass: ServerScrollBarHelper
+  },
+  {
+    provide: DimensionsHelper,
+    useClass: ServerDimensionsHelper
+  }]
+  ```
+

release/services/dimensions-helper.service.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gets the width of the scrollbar.  Nesc for windows
+ * http://stackoverflow.com/a/13382873/888165
+ */
+export declare class DimensionsHelper {
+    getDimensions(element: Element): ClientRect;
+}

release/services/dimensions-helper.service.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"DimensionsHelper":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"getDimensions":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DimensionsHelper":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"getDimensions":[{"__symbolic":"method"}]}}}}]

src/components/body/body-row.component.ts

@@ -1,13 +1,13 @@
 import {
   Component, Input, HostBinding, ElementRef, Output, KeyValueDiffers, KeyValueDiffer,
-  EventEmitter, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, DoCheck
+  EventEmitter, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, DoCheck, SkipSelf
 } from '@angular/core';
 
 import {
   allColumnsByPinArr, columnsByPin, columnGroupWidths, columnsByPinArr, translateXY, Keys
 } from '../../utils';
 import { ScrollbarHelper } from '../../services';
-import { MouseEvent, KeyboardEvent } from '../../events';
+import { MouseEvent, KeyboardEvent, Event } from '../../events';
 
 @Component({
   selector: 'datatable-body-row',
@@ -122,7 +122,7 @@ export class DataTableBodyRowComponent implements DoCheck {
 
   constructor(
       private differs: KeyValueDiffers,
-      private scrollbarHelper: ScrollbarHelper,
+      @SkipSelf() private scrollbarHelper: ScrollbarHelper,
       private cd: ChangeDetectorRef, 
       element: ElementRef) {
     this._element = element.nativeElement;

src/components/body/scroller.component.ts

@@ -1,5 +1,5 @@
 import {
-  Component, Input, ElementRef, Output, EventEmitter, NgZone,
+  Component, Input, ElementRef, Output, EventEmitter, Renderer2, NgZone,
   OnInit, OnDestroy, HostBinding, ChangeDetectionStrategy
 } from '@angular/core';
 
@@ -36,17 +36,19 @@ export class ScrollerComponent implements OnInit, OnDestroy {
   parentElement: any;
   onScrollListener: any;
 
-  constructor(private ngZone: NgZone, element: ElementRef) {
+  constructor(private ngZone: NgZone, element: ElementRef, private renderer: Renderer2) {
+
     this.element = element.nativeElement;
   }
 
   ngOnInit(): void {
     // manual bind so we don't always listen
     if (this.scrollbarV || this.scrollbarH) {
-      this.parentElement = this.element.parentElement.parentElement;
+      const renderer = this.renderer;
+      this.parentElement = renderer.parentNode(renderer.parentNode(this.element));
       this.ngZone.runOutsideAngular(() => {
-        this.parentElement.addEventListener('scroll', this.onScrolled.bind(this));
-      });
+          this.parentElement.addEventListener('scroll', this.onScrolled.bind(this));
+        });
     }
   }
 

src/components/body/selection.component.ts

@@ -4,7 +4,7 @@ import { SelectionType } from '../../types';
 import { MouseEvent, KeyboardEvent } from '../../events';
 
 export interface Model {
-  type: string;
+  type: string; 
   event: MouseEvent | KeyboardEvent;
   row: any;
   rowElement: any;

src/components/datatable.component.spec.ts

@@ -396,9 +396,8 @@ function setupTest() {
 function sortBy({ column }: { column: number }) {
   const columnIndex = column - 1;
   const headerCellDe = fixture.debugElement
-    .queryAll(By.directive(DataTableHeaderCellComponent))[columnIndex];
+    .queryAll(By.css('datatable-header-cell'))[columnIndex];
   const de = headerCellDe.query(By.css('span:last-child'));
-
   de.triggerEventHandler('click', null);
 }
 

src/components/datatable.component.ts

@@ -3,14 +3,14 @@ import {
   HostListener, ContentChildren, OnInit, QueryList, AfterViewInit,
   HostBinding, ContentChild, TemplateRef, IterableDiffer,
   DoCheck, KeyValueDiffers, KeyValueDiffer, ViewEncapsulation,
-  ChangeDetectionStrategy, ChangeDetectorRef
+  ChangeDetectionStrategy, ChangeDetectorRef, SkipSelf
 } from '@angular/core';
 
 import {
   forceFillColumnWidths, adjustColumnWidths, sortRows,
   setColumnDefaults, throttleable, translateTemplates
 } from '../utils';
-import { ScrollbarHelper } from '../services';
+import { ScrollbarHelper, DimensionsHelper } from '../services';
 import { ColumnMode, SortType, SelectionType, TableColumn, ContextmenuType } from '../types';
 import { DataTableBodyComponent } from './body';
 import { DatatableGroupHeaderDirective } from './body/body-group-header.directive';
@@ -605,7 +605,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    * Returns if all rows are selected.
    */
   get allRowsSelected(): boolean {
-    let allRowsSelected = (this.selected.length === this.rows.length);
+    let allRowsSelected = (this.rows && this.selected && this.selected.length === this.rows.length);
 
     if (this.selectAllRowsOnPage) {
       const indexes = this.bodyComponent.indexes;
@@ -636,7 +636,8 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   _columnTemplates: QueryList<DataTableColumnDirective>;
 
   constructor(
-    private scrollbarHelper: ScrollbarHelper,
+    @SkipSelf() private scrollbarHelper: ScrollbarHelper,
+    @SkipSelf() private dimensionsHelper: DimensionsHelper,
     private cd: ChangeDetectorRef,
     element: ElementRef,
     differs: KeyValueDiffers) {
@@ -668,6 +669,10 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
 
     // this has to be done to prevent the change detection
     // tree from freaking out because we are readjusting
+    if (typeof requestAnimationFrame === 'undefined') {
+      return;
+    }
+
     requestAnimationFrame(() => {
       this.recalculate();
 
@@ -808,7 +813,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    *
    */
   recalculateDims(): void {
-    const dims = this.element.getBoundingClientRect();
+    const dims = this.dimensionsHelper.getDimensions(this.element);
     this._innerWidth = Math.floor(dims.width);
 
     if (this.scrollbarV) {

src/datatable.module.ts

@@ -34,14 +34,18 @@ import {
   DraggableDirective
 } from './directives';
 
-import { ScrollbarHelper } from './services';
+import { 
+  ScrollbarHelper,
+  DimensionsHelper 
+} from './services';
 
 @NgModule({
   imports: [
     CommonModule
   ],
   providers: [
-    ScrollbarHelper
+    ScrollbarHelper,
+    DimensionsHelper
   ],
   declarations: [
     DataTableFooterTemplateDirective,

src/directives/resizeable.directive.ts

@@ -1,5 +1,5 @@
 import {
-  Directive, ElementRef, HostListener, Input, Output, EventEmitter, OnDestroy, AfterViewInit
+  Directive, ElementRef, HostListener, Input, Output, EventEmitter, OnDestroy, AfterViewInit, Renderer2
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
@@ -24,15 +24,16 @@ export class ResizeableDirective implements OnDestroy, AfterViewInit {
   subscription: Subscription;
   resizing: boolean = false;
 
-  constructor(element: ElementRef) {
+  constructor(element: ElementRef, private renderer: Renderer2) {
     this.element = element.nativeElement;
   }
 
   ngAfterViewInit(): void {
+    const renderer2 = this.renderer;
     if (this.resizeEnabled) {
-      const node = document.createElement('span');
-      node.classList.add('resize-handle');
-      this.element.appendChild(node);
+      const node = renderer2.createElement('span');
+      renderer2.addClass(node, 'resize-handle');
+      renderer2.appendChild(this.element, node);
     }
   }
 

src/events.ts

@@ -3,3 +3,4 @@ declare let global: any;
 /* tslint:disable:variable-name */
 export const MouseEvent = (global as any).MouseEvent as MouseEvent;
 export const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
+export const Event = (global as any).Event as Event;

src/index.ts

@@ -1,3 +1,4 @@
 export * from './datatable.module';
 export * from './types';
 export * from './components';
+export * from './services';

src/services/dimensions-helper.service.ts

@@ -0,0 +1,14 @@
+import { Inject, Injectable } from '@angular/core';
+
+/**
+ * Gets the width of the scrollbar.  Nesc for windows
+ * http://stackoverflow.com/a/13382873/888165
+ */
+@Injectable()
+export class DimensionsHelper {
+
+  getDimensions(element: Element): ClientRect {
+    return element.getBoundingClientRect();
+  }
+
+}

src/services/index.ts

@@ -1 +1,2 @@
 export * from './scrollbar-helper.service';
+export * from './dimensions-helper.service';

src/utils/facade/browser.ts

@@ -0,0 +1,26 @@
+/*tslint:disable */
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/**
+ * JS version of browser APIs. This library can only run in the browser.
+ */
+var win = (typeof window !== 'undefined' && window) || <any>{};
+
+export { win as window };
+export var document = win.document;
+export var location = win.location;
+export var gc = win['gc'] ? () => win['gc']() : (): any => null;
+export var performance = win['performance'] ? win['performance'] : null;
+export const Event = win['Event'];
+export const MouseEvent = win['MouseEvent'];
+export const KeyboardEvent = win['KeyboardEvent'];
+export const EventTarget = win['EventTarget'];
+export const History = win['History'];
+export const Location = win['Location'];
+export const EventListener = win['EventListener'];