Merge pull request #25 from Angular-RU/fix/null

Fix/null

Author: splincode

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "0.33.0",
+    "version": "0.34.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"

projects/table-builder/src/lib/table/animations/fade.animation.ts

@@ -3,12 +3,7 @@ import { animate, AnimationTriggerMetadata, state, style, transition, trigger }
 const DEFAULT_TIME_ANIMATION: number = 150;
 
 export const NGX_ANIMATION: AnimationTriggerMetadata = trigger('fadeAnimation', [
-    // the "in" style determines the "resting" state of the element when it is visible.
     state('in', style({ opacity: 1 })),
-
-    // fade in when created. this could also be written as transition('void => *')
     transition(':enter', [style({ opacity: 0 }), animate(DEFAULT_TIME_ANIMATION)]),
-
-    // fade out when destroyed. this could also be written as transition('void => *')
-    transition(':leave', animate(DEFAULT_TIME_ANIMATION, style({ opacity: 0 })))
+    transition(':leave', animate(0, style({ opacity: 0 })))
 ]);

projects/table-builder/src/lib/table/directives/virtual-for.directive.ts

@@ -11,7 +11,6 @@ export class VirtualForDirective implements OnDestroy {
     @Input() public virtualForBufferOffset: number | null = null;
     private cache: Map<number, InternalVirtualRef> = new Map();
     private _source: TableRow[] = [];
-    // noinspection JSMismatchedCollectionQueryUpdate
     private _indexes: VirtualIndex[] = [];
     private createFrameId: number;
     private removeFrameId: number;
@@ -35,19 +34,23 @@ export class VirtualForDirective implements OnDestroy {
 
         this._indexes = indexes;
         this.removeOldNodes();
-        this.createNewNodes(indexes);
+        this.createNewNodes(this._indexes);
+    }
+
+    private get sourceRef(): TableRow[] {
+        return this._source || [];
     }
 
     public ngOnDestroy(): void {
-        this.view.clear();
         window.cancelAnimationFrame(this.createFrameId);
         window.cancelAnimationFrame(this.removeFrameId);
+        this.view.clear();
     }
 
     private createNewNodes(indexes: VirtualIndex[]): void {
         indexes.forEach(
             (index: VirtualIndex): void => {
-                if (this.virtualForBufferOffset < 0) {
+                if (this.virtualBufferIsOverloadOrNull) {
                     this.createEmbeddedViewByIndex(index);
                 } else {
                     this.createFrameId = window.requestAnimationFrame(
@@ -70,7 +73,7 @@ export class VirtualForDirective implements OnDestroy {
     }
 
     private createEmbeddedViewByIndex(index: VirtualIndex): void {
-        const row: TableRow = this._source[index.position];
+        const row: TableRow = this.sourceRef[index.position];
         const virtualRef: InternalVirtualRef = this.cache.get(index.position);
 
         if (virtualRef) {
@@ -93,7 +96,7 @@ export class VirtualForDirective implements OnDestroy {
 
         this.virtualForDiffIndexes.forEach(
             (index: number): void => {
-                if (this.virtualForBufferOffset < 0) {
+                if (this.virtualBufferIsOverloadOrNull) {
                     this.removeEmbeddedViewByIndex(index);
                 } else {
                     this.removeFrameId = window.requestAnimationFrame(
@@ -104,6 +107,10 @@ export class VirtualForDirective implements OnDestroy {
         );
     }
 
+    private get virtualBufferIsOverloadOrNull(): boolean {
+        return this.virtualForBufferOffset < 0 || !Number.isInteger(this.virtualForBufferOffset);
+    }
+
     private removeEmbeddedViewByIndex(index: number): void {
         const ref: InternalVirtualRef | undefined = this.cache.get(index);
         if (ref) {

projects/table-builder/src/lib/table/table-builder.component.html

@@ -87,7 +87,7 @@
                     [class.table-grid__column--filter-enable]="filterTemplate"
                     (observeVisible)="markVisibleColumn(column, $event)"
                 >
-                    <div *ngIf="column['visible']">
+                    <div *ngIf="column['visible']" [@fadeAnimation]>
                         <table-thead
                             cdkDragHandle
                             [column-schema]="columnSchema"