From 69e883c454405ca4b9dac4ee35cd9ee855f2c9f1 Mon Sep 17 00:00:00 2001
From: mishkolesnikov <mishkolesnikov@gmail.com>
Date: Thu, 25 May 2017 11:47:57 +0300
Subject: [PATCH] fix(table): performance improve (#367), (fix #189, fix #300)

---
 .../cell-view-mode/view-cell.component.ts     |  3 ++-
 .../filter-types/input-filter.component.ts    |  1 +
 .../filter-types/select-filter.component.ts   |  1 +
 .../tbody/cells/create-cancel.component.ts    | 16 +++++++++---
 .../tbody/cells/edit-delete.component.ts      | 25 +++++++++++++-----
 .../components/tbody/tbody.component.html     | 26 +++++++++----------
 .../components/tbody/tbody.component.ts       | 26 ++++++++++++++++++-
 .../thead/cells/actions-title.component.ts    | 12 ++++++---
 .../thead/cells/actions.component.ts          | 16 +++++++++---
 .../thead/cells/add-button.component.ts       | 16 +++++++++---
 .../thead/rows/thead-filters-row.component.ts | 24 ++++++++++++-----
 .../thead/rows/thead-form-row.component.ts    | 23 +++++++++++-----
 .../thead/rows/thead-titles-row.component.ts  | 22 ++++++++++++----
 .../components/thead/thead.component.html     |  6 ++---
 .../components/thead/thead.component.ts       | 12 +++++++--
 src/ng2-smart-table/lib/grid.ts               | 10 +++----
 .../ng2-smart-table.component.html            |  6 ++---
 .../ng2-smart-table.component.ts              | 16 ++++++++++--
 18 files changed, 193 insertions(+), 68 deletions(-)

diff --git a/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.component.ts b/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.component.ts
index 6f1f82f00..83fae61d8 100644
--- a/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.component.ts
+++ b/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.component.ts
@@ -1,9 +1,10 @@
-import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import {Component, Input, ChangeDetectionStrategy } from '@angular/core';
 
 import { Cell } from '../../../lib/data-set/cell';
 
 @Component({
   selector: 'table-cell-view-mode',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div [ngSwitch]="cell.getColumn().type">
         <custom-view-component *ngSwitchCase="'custom'" [cell]="cell"></custom-view-component>
diff --git a/src/ng2-smart-table/components/filter/filter-types/input-filter.component.ts b/src/ng2-smart-table/components/filter/filter-types/input-filter.component.ts
index fb82e52bf..62bb89718 100644
--- a/src/ng2-smart-table/components/filter/filter-types/input-filter.component.ts
+++ b/src/ng2-smart-table/components/filter/filter-types/input-filter.component.ts
@@ -26,6 +26,7 @@ export class InputFilterComponent extends DefaultFilter implements OnInit {
 
   ngOnInit() {
     this.inputControl.valueChanges
+      .skip(1)
       .distinctUntilChanged()
       .debounceTime(this.delay)
       .subscribe((value: string) => this.setFilter());
diff --git a/src/ng2-smart-table/components/filter/filter-types/select-filter.component.ts b/src/ng2-smart-table/components/filter/filter-types/select-filter.component.ts
index 7ad4957e1..e7d97c8e7 100644
--- a/src/ng2-smart-table/components/filter/filter-types/select-filter.component.ts
+++ b/src/ng2-smart-table/components/filter/filter-types/select-filter.component.ts
@@ -30,6 +30,7 @@ export class SelectFilterComponent extends DefaultFilter implements OnInit {
 
   ngOnInit() {
     this.inputControl.valueChanges
+      .skip(1)
       .distinctUntilChanged()
       .debounceTime(this.delay)
       .subscribe((value: string) => this.setFilter());
diff --git a/src/ng2-smart-table/components/tbody/cells/create-cancel.component.ts b/src/ng2-smart-table/components/tbody/cells/create-cancel.component.ts
index ab960fc1f..cf3d21fb6 100644
--- a/src/ng2-smart-table/components/tbody/cells/create-cancel.component.ts
+++ b/src/ng2-smart-table/components/tbody/cells/create-cancel.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, EventEmitter, OnChanges } from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 import { Row } from '../../../lib/data-set/row';
@@ -7,17 +7,20 @@ import { Row } from '../../../lib/data-set/row';
   selector: 'ng2-st-tbody-create-cancel',
   template: `
     <a href="#" class="ng2-smart-action ng2-smart-action-edit-save"
-        [innerHTML]="grid.getSetting('edit.saveButtonContent')" (click)="onSave($event)"></a>
+        [innerHTML]="saveButtonContent" (click)="onSave($event)"></a>
     <a href="#" class="ng2-smart-action ng2-smart-action-edit-cancel"
-        [innerHTML]="grid.getSetting('edit.cancelButtonContent')" (click)="onCancelEdit($event)"></a>
+        [innerHTML]="cancelButtonContent" (click)="onCancelEdit($event)"></a>
   `,
 })
-export class TbodyCreateCancelComponent {
+export class TbodyCreateCancelComponent implements OnChanges {
 
   @Input() grid: Grid;
   @Input() row: Row;
   @Input() editConfirm: EventEmitter<any>;
 
+  cancelButtonContent: string;
+  saveButtonContent: string;
+
   onSave(event: any) {
     event.preventDefault();
     event.stopPropagation();
@@ -31,4 +34,9 @@ export class TbodyCreateCancelComponent {
 
     this.row.isInEditing = false;
   }
+
+  ngOnChanges() {
+    this.saveButtonContent = this.grid.getSetting('edit.saveButtonContent');
+    this.cancelButtonContent = this.grid.getSetting('edit.cancelButtonContent')
+  }
 }
diff --git a/src/ng2-smart-table/components/tbody/cells/edit-delete.component.ts b/src/ng2-smart-table/components/tbody/cells/edit-delete.component.ts
index 250c4fccd..9652bfdf1 100644
--- a/src/ng2-smart-table/components/tbody/cells/edit-delete.component.ts
+++ b/src/ng2-smart-table/components/tbody/cells/edit-delete.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 import { Row } from '../../../lib/data-set/row';
@@ -6,14 +6,15 @@ import { DataSource } from '../../../lib/data-source/data-source';
 
 @Component({
   selector: 'ng2-st-tbody-edit-delete',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <a href="#" *ngIf="grid.getSetting('actions.edit')" class="ng2-smart-action ng2-smart-action-edit-edit"
-        [innerHTML]="grid.getSetting('edit.editButtonContent')" (click)="onEdit($event)"></a>
-    <a href="#" *ngIf="grid.getSetting('actions.delete')" class="ng2-smart-action ng2-smart-action-delete-delete"
-        [innerHTML]="grid.getSetting('delete.deleteButtonContent')" (click)="onDelete($event)"></a>
+    <a href="#" *ngIf="isActionEdit" class="ng2-smart-action ng2-smart-action-edit-edit"
+        [innerHTML]="editRowButtonContent" (click)="onEdit($event)"></a>
+    <a href="#" *ngIf="isActionDelete" class="ng2-smart-action ng2-smart-action-delete-delete"
+        [innerHTML]="deleteRowButtonContent" (click)="onDelete($event)"></a>
   `,
 })
-export class TbodyEditDeleteComponent {
+export class TbodyEditDeleteComponent implements OnChanges {
 
   @Input() grid: Grid;
   @Input() row: Row;
@@ -25,6 +26,11 @@ export class TbodyEditDeleteComponent {
   @Output() delete = new EventEmitter<any>();
   @Output() editRowSelect = new EventEmitter<any>();
 
+  isActionEdit: boolean;
+  isActionDelete: boolean;
+  editRowButtonContent: string;
+  deleteRowButtonContent: string;
+
   onEdit(event: any) {
     event.preventDefault();
     event.stopPropagation();
@@ -54,4 +60,11 @@ export class TbodyEditDeleteComponent {
       this.grid.delete(this.row, this.deleteConfirm);
     }
   }
+
+  ngOnChanges(){
+    this.isActionEdit = this.grid.getSetting('actions.edit');
+    this.isActionDelete = this.grid.getSetting('actions.delete');
+    this.editRowButtonContent = this.grid.getSetting('edit.editButtonContent');
+    this.deleteRowButtonContent = this.grid.getSetting('delete.deleteButtonContent');
+  }
 }
diff --git a/src/ng2-smart-table/components/tbody/tbody.component.html b/src/ng2-smart-table/components/tbody/tbody.component.html
index 7937d62e7..56d5667f1 100644
--- a/src/ng2-smart-table/components/tbody/tbody.component.html
+++ b/src/ng2-smart-table/components/tbody/tbody.component.html
@@ -1,8 +1,8 @@
-<tr *ngFor="let row of grid.getRows()" (click)="userSelectRow.emit(row)" (mouseover)="rowHover.emit(row)" class="ng2-smart-row" [ngClass]="{selected: row.isSelected}">
-  <td *ngIf="grid.isMultiSelectVisible()" class="ng2-smart-actions ng2-smart-action-multiple-select" (click)="multipleSelectRow.emit(row)">
+<tr *ngFor="let row of this.grid.getRows()" (click)="userSelectRow.emit(row)" (mouseover)="rowHover.emit(row)" class="ng2-smart-row" [ngClass]="{selected: row.isSelected}">
+  <td *ngIf="isMultiSelectVisible" class="ng2-smart-actions ng2-smart-action-multiple-select" (click)="multipleSelectRow.emit(row)">
     <input type="checkbox" class="form-control" [ngModel]="row.isSelected">
   </td>
-  <td *ngIf="!row.isInEditing && grid.showActionColumn('left')" class="ng2-smart-actions">
+  <td *ngIf="!row.isInEditing && showActionColumnLeft" class="ng2-smart-actions">
     <ng2-st-tbody-custom [grid]="grid" (custom)="custom.emit($event)" [row]="row" [source]="source"></ng2-st-tbody-custom>
 
     <ng2-st-tbody-edit-delete [grid]="grid"
@@ -15,26 +15,26 @@
                               [source]="source">
     </ng2-st-tbody-edit-delete>
   </td>
-   <td *ngIf="row.isInEditing && grid.showActionColumn('left')"  class="ng2-smart-actions">
+   <td *ngIf="row.isInEditing && showActionColumnLeft"  class="ng2-smart-actions">
     <ng2-st-tbody-create-cancel [grid]="grid" [row]="row" [editConfirm]="editConfirm"></ng2-st-tbody-create-cancel>
   </td>
-  <td *ngFor="let cell of row.getCells()">
+  <td *ngFor="let cell of row.cells">
     <ng2-smart-table-cell [cell]="cell"
                           [grid]="grid"
                           [row]="row"
                           [isNew]="false"
-                          [mode]="grid.getSetting('mode')"
+                          [mode]="mode"
                           [editConfirm]="editConfirm"
-                          [inputClass]="grid.getSetting('edit.inputClass')"
+                          [inputClass]="editInputClass"
                           [isInEditing]="row.isInEditing">
     </ng2-smart-table-cell>
   </td>
-  
-  <td *ngIf="row.isInEditing && grid.showActionColumn('right')"  class="ng2-smart-actions">
+
+  <td *ngIf="row.isInEditing && showActionColumnRight"  class="ng2-smart-actions">
     <ng2-st-tbody-create-cancel [grid]="grid" [row]="row" [editConfirm]="editConfirm"></ng2-st-tbody-create-cancel>
   </td>
-  
-  <td *ngIf="!row.isInEditing && grid.showActionColumn('right')" class="ng2-smart-actions">
+
+  <td *ngIf="!row.isInEditing && showActionColumnRight" class="ng2-smart-actions">
     <ng2-st-tbody-custom [grid]="grid" (custom)="custom.emit($event)" [row]="row" [source]="source"></ng2-st-tbody-custom>
 
     <ng2-st-tbody-edit-delete [grid]="grid"
@@ -50,7 +50,7 @@
 </tr>
 
 <tr *ngIf="grid.getRows().length == 0">
-  <td [attr.colspan]="grid.getColumns().length + (grid.getSetting('actions.add') || grid.getSetting('actions.edit') || grid.getSetting('actions.delete'))">
-    {{ grid.getSetting('noDataMessage') }}
+  <td [attr.colspan]="grid.getColumns().length + (isActionAdd || isActionEdit || isActionDelete)">
+    {{ noDataMessage }}
   </td>
 </tr>
diff --git a/src/ng2-smart-table/components/tbody/tbody.component.ts b/src/ng2-smart-table/components/tbody/tbody.component.ts
index d17a28741..cb7004953 100644
--- a/src/ng2-smart-table/components/tbody/tbody.component.ts
+++ b/src/ng2-smart-table/components/tbody/tbody.component.ts
@@ -1,7 +1,9 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, } from '@angular/core';
 
 import { Grid } from '../../lib/grid';
+import { Row } from '../../lib/data-set/row';
 import { DataSource } from '../../lib/data-source/data-source';
+import {Column} from "../../lib/data-set/column";
 
 @Component({
   selector: '[ng2-st-tbody]',
@@ -25,4 +27,26 @@ export class Ng2SmartTableTbodyComponent {
   @Output() editRowSelect = new EventEmitter<any>();
   @Output() multipleSelectRow = new EventEmitter<any>();
   @Output() rowHover = new EventEmitter<any>();
+
+  isMultiSelectVisible: boolean;
+  showActionColumnLeft: boolean;
+  showActionColumnRight: boolean;
+  mode: string;
+  editInputClass: string;
+  isActionAdd: boolean;
+  isActionEdit: boolean;
+  isActionDelete: boolean;
+  noDataMessage: boolean;
+
+  ngOnChanges() {
+    this.isMultiSelectVisible = this.grid.isMultiSelectVisible()
+    this.showActionColumnLeft = this.grid.showActionColumn('left');
+    this.mode = this.grid.getSetting('mode');
+    this.editInputClass = this.grid.getSetting('edit.inputClass');
+    this.showActionColumnRight = this.grid.showActionColumn('right');
+    this.isActionAdd = this.grid.getSetting('actions.add');
+    this.isActionEdit = this.grid.getSetting('actions.edit');
+    this.isActionDelete = this.grid.getSetting('actions.delete');
+    this.noDataMessage = this.grid.getSetting('noDataMessage');
+  }
 }
diff --git a/src/ng2-smart-table/components/thead/cells/actions-title.component.ts b/src/ng2-smart-table/components/thead/cells/actions-title.component.ts
index f33c685c6..ab5e34af9 100644
--- a/src/ng2-smart-table/components/thead/cells/actions-title.component.ts
+++ b/src/ng2-smart-table/components/thead/cells/actions-title.component.ts
@@ -1,21 +1,27 @@
-import { Component, Input, AfterViewInit, ElementRef } from '@angular/core';
+import {Component, Input, AfterViewInit, ElementRef, OnChanges} from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 
 @Component({
   selector: '[ng2-st-actions-title]',
   template: `
-    <div class="ng2-smart-title">{{ grid.getSetting('actions.columnTitle') }}</div>
+    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
   `,
 })
-export class ActionsTitleComponent implements AfterViewInit {
+export class ActionsTitleComponent implements AfterViewInit, OnChanges {
 
   @Input() grid: Grid;
 
+  actionsColumnTitle: string;
+
   constructor(private ref: ElementRef) {
   }
 
   ngAfterViewInit() {
     this.ref.nativeElement.classList.add('ng2-smart-actions');
   }
+
+  ngOnChanges() {
+    this.actionsColumnTitle = this.grid.getSetting('actions.columnTitle');
+  }
 }
diff --git a/src/ng2-smart-table/components/thead/cells/actions.component.ts b/src/ng2-smart-table/components/thead/cells/actions.component.ts
index 234764e37..1d7c33402 100644
--- a/src/ng2-smart-table/components/thead/cells/actions.component.ts
+++ b/src/ng2-smart-table/components/thead/cells/actions.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 
@@ -6,15 +6,23 @@ import { Grid } from '../../../lib/grid';
   selector: 'ng2-st-actions',
   template: `
     <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
-        [innerHTML]="grid.getSetting('add.createButtonContent')"
+        [innerHTML]="createButtonContent"
         (click)="$event.preventDefault();create.emit($event)"></a>
     <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
-        [innerHTML]="grid.getSetting('add.cancelButtonContent')"
+        [innerHTML]="cancelButtonContent"
         (click)="$event.preventDefault();grid.createFormShown = false;"></a>
   `,
 })
-export class ActionsComponent {
+export class ActionsComponent implements OnChanges {
 
   @Input() grid: Grid;
   @Output() create = new EventEmitter<any>();
+
+  createButtonContent: string;
+  cancelButtonContent: string;
+
+  ngOnChanges() {
+    this.createButtonContent = this.grid.getSetting('add.createButtonContent');
+    this.cancelButtonContent = this.grid.getSetting('add.cancelButtonContent');
+  }
 }
diff --git a/src/ng2-smart-table/components/thead/cells/add-button.component.ts b/src/ng2-smart-table/components/thead/cells/add-button.component.ts
index ff5b3e6a6..f66025030 100644
--- a/src/ng2-smart-table/components/thead/cells/add-button.component.ts
+++ b/src/ng2-smart-table/components/thead/cells/add-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, AfterViewInit, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, AfterViewInit, ElementRef, OnChanges } from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 import { DataSource } from '../../../lib/data-source/data-source';
@@ -6,16 +6,19 @@ import { DataSource } from '../../../lib/data-source/data-source';
 @Component({
   selector: '[ng2-st-add-button]',
   template: `
-    <a *ngIf="grid.getSetting('actions.add')" href="#" class="ng2-smart-action ng2-smart-action-add-add"
-        [innerHTML]="grid.getSetting('add.addButtonContent')" (click)="onAdd($event)"></a>
+    <a *ngIf="isActionAdd" href="#" class="ng2-smart-action ng2-smart-action-add-add"
+        [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
   `,
 })
-export class AddButtonComponent implements AfterViewInit {
+export class AddButtonComponent implements AfterViewInit, OnChanges {
 
   @Input() grid: Grid;
   @Input() source: DataSource;
   @Output() create = new EventEmitter<any>();
 
+  isActionAdd: boolean;
+  addNewButtonContent: string;
+
   constructor(private ref: ElementRef) {
   }
 
@@ -23,6 +26,11 @@ export class AddButtonComponent implements AfterViewInit {
     this.ref.nativeElement.classList.add('ng2-smart-actions-title', 'ng2-smart-actions-title-add');
   }
 
+  ngOnChanges() {
+    this.isActionAdd = this.grid.getSetting('actions.add');
+    this.addNewButtonContent = this.grid.getSetting('add.addButtonContent');
+  }
+
   onAdd(event: any) {
     event.preventDefault();
     event.stopPropagation();
diff --git a/src/ng2-smart-table/components/thead/rows/thead-filters-row.component.ts b/src/ng2-smart-table/components/thead/rows/thead-filters-row.component.ts
index 681e73e6f..143cabe7d 100644
--- a/src/ng2-smart-table/components/thead/rows/thead-filters-row.component.ts
+++ b/src/ng2-smart-table/components/thead/rows/thead-filters-row.component.ts
@@ -1,31 +1,32 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnChanges} from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 import { DataSource } from '../../../lib/data-source/data-source';
+import { Column } from "../../../lib/data-set/column";
 
 @Component({
   selector: '[ng2-st-thead-filters-row]',
   template: `
-    <th *ngIf="grid.isMultiSelectVisible()"></th>
-    <th ng2-st-add-button *ngIf="grid.showActionColumn('left')"
+    <th *ngIf="isMultiSelectVisible"></th>
+    <th ng2-st-add-button *ngIf="showActionColumnLeft"
                           [grid]="grid"
                           (create)="create.emit($event)">
     </th>
     <th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}">
       <ng2-smart-table-filter [source]="source"
                               [column]="column"
-                              [inputClass]="grid.getSetting('filter.inputClass')"
+                              [inputClass]="filterInputClass"
                               (filter)="filter.emit($event)">
       </ng2-smart-table-filter>
     </th>
-    <th ng2-st-add-button *ngIf="grid.showActionColumn('right')"
+    <th ng2-st-add-button *ngIf="showActionColumnRight"
                           [grid]="grid"
                           [source]="source"
                           (create)="create.emit($event)">
     </th>
   `,
 })
-export class TheadFitlersRowComponent {
+export class TheadFitlersRowComponent implements OnChanges {
 
   @Input() grid: Grid;
   @Input() source: DataSource;
@@ -33,4 +34,15 @@ export class TheadFitlersRowComponent {
   @Output() create = new EventEmitter<any>();
   @Output() filter = new EventEmitter<any>();
 
+  isMultiSelectVisible: boolean;
+  showActionColumnLeft: boolean;
+  showActionColumnRight: boolean;
+  filterInputClass: string;
+
+  ngOnChanges() {
+    this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
+    this.showActionColumnLeft = this.grid.showActionColumn('left');
+    this.showActionColumnRight = this.grid.showActionColumn('right');
+    this.filterInputClass = this.grid.getSetting('filter.inputClass');
+  }
 }
diff --git a/src/ng2-smart-table/components/thead/rows/thead-form-row.component.ts b/src/ng2-smart-table/components/thead/rows/thead-form-row.component.ts
index 6e93fe01c..87513ac4a 100644
--- a/src/ng2-smart-table/components/thead/rows/thead-form-row.component.ts
+++ b/src/ng2-smart-table/components/thead/rows/thead-form-row.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 import { Row } from '../../../lib/data-set/row';
@@ -6,8 +6,8 @@ import { Row } from '../../../lib/data-set/row';
 @Component({
   selector: '[ng2-st-thead-form-row]',
   template: `
-      <td *ngIf="grid.isMultiSelectVisible()"></td>
-      <td  *ngIf= "grid.showActionColumn('left')"  class="ng2-smart-actions">
+      <td *ngIf=""></td>
+      <td  *ngIf="showActionColumnLeft"  class="ng2-smart-actions">
         <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
       </td>
       <td *ngFor="let cell of grid.getNewRow().getCells()">
@@ -15,17 +15,17 @@ import { Row } from '../../../lib/data-set/row';
                               [grid]="grid"
                               [isNew]="true"
                               [createConfirm]="createConfirm"
-                              [inputClass]="grid.getSetting('add.inputClass')"
+                              [inputClass]="addInputClass"
                               [isInEditing]="grid.getNewRow().isInEditing"
                               (edited)="onCreate($event)">
         </ng2-smart-table-cell>
       </td>
-      <td  *ngIf= "grid.showActionColumn('right')"  class="ng2-smart-actions">
+      <td  *ngIf="showActionColumnRight"  class="ng2-smart-actions">
         <ng2-st-actions [grid]="grid" (create)="onCreate($event)"></ng2-st-actions>
       </td>
   `,
 })
-export class TheadFormRowComponent {
+export class TheadFormRowComponent implements OnChanges {
 
   @Input() grid: Grid;
   @Input() row: Row;
@@ -33,10 +33,21 @@ export class TheadFormRowComponent {
 
   @Output() create = new EventEmitter<any>();
 
+  isMultiSelectVisible: boolean;
+  showActionColumnLeft: boolean;
+  showActionColumnRight: boolean;
+  addInputClass: string;
+
   onCreate(event: any) {
     event.stopPropagation();
 
     this.grid.create(this.grid.getNewRow(), this.createConfirm);
   }
 
+  ngOnChanges(){
+    this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
+    this.showActionColumnLeft = this.grid.showActionColumn('left');
+    this.showActionColumnRight = this.grid.showActionColumn('right');
+    this.addInputClass = this.grid.getSetting('add.inputClass');
+  }
 }
diff --git a/src/ng2-smart-table/components/thead/rows/thead-titles-row.component.ts b/src/ng2-smart-table/components/thead/rows/thead-titles-row.component.ts
index 15cae92cc..50f2166d3 100644
--- a/src/ng2-smart-table/components/thead/rows/thead-titles-row.component.ts
+++ b/src/ng2-smart-table/components/thead/rows/thead-titles-row.component.ts
@@ -1,26 +1,27 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnChanges} from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 import { DataSource } from '../../../lib/data-source/data-source';
+import { Column } from "../../../lib/data-set/column";
 
 @Component({
   selector: '[ng2-st-thead-titles-row]',
   template: `
-    <th ng2-st-checkbox-select-all *ngIf="grid.isMultiSelectVisible()"
+    <th ng2-st-checkbox-select-all *ngIf="isMultiSelectVisible"
                                    [grid]="grid"
                                    [source]="source"
                                    [isAllSelected]="isAllSelected"
                                    (click)="selectAllRows.emit($event)">
     </th>
-    <th ng2-st-actions-title *ngIf="grid.showActionColumn('left')" [grid]="grid"></th>
+    <th ng2-st-actions-title *ngIf="showActionColumnLeft" [grid]="grid"></th>
     <th *ngFor="let column of grid.getColumns()" class="ng2-smart-th {{ column.id }}" [ngClass]="column.class"
       [style.width]="column.width" >
       <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
     </th>
-    <th ng2-st-actions-title *ngIf="grid.showActionColumn('right')" [grid]="grid"></th>
+    <th ng2-st-actions-title *ngIf="showActionColumnRight" [grid]="grid"></th>
   `,
 })
-export class TheadTitlesRowComponent {
+export class TheadTitlesRowComponent implements OnChanges {
 
   @Input() grid: Grid;
   @Input() isAllSelected: boolean;
@@ -29,4 +30,15 @@ export class TheadTitlesRowComponent {
   @Output() sort = new EventEmitter<any>();
   @Output() selectAllRows = new EventEmitter<any>();
 
+  isMultiSelectVisible: boolean;
+  showActionColumnLeft: boolean;
+  showActionColumnRight: boolean;
+
+
+  ngOnChanges() {
+    this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
+    this.showActionColumnLeft = this.grid.showActionColumn('left');
+    this.showActionColumnRight = this.grid.showActionColumn('right');
+  }
+
 }
diff --git a/src/ng2-smart-table/components/thead/thead.component.html b/src/ng2-smart-table/components/thead/thead.component.html
index 4dcabdf8b..d6a98f06f 100644
--- a/src/ng2-smart-table/components/thead/thead.component.html
+++ b/src/ng2-smart-table/components/thead/thead.component.html
@@ -1,4 +1,4 @@
-<tr ng2-st-thead-titles-row *ngIf="!grid.getSetting('hideHeader')"
+<tr ng2-st-thead-titles-row *ngIf="!isHideHeader"
                             class="ng2-smart-titles"
                             [grid]="grid"
                             [isAllSelected]="isAllSelected"
@@ -7,7 +7,7 @@
                             (selectAllRows)="selectAllRows.emit($event)">
 </tr>
 
-<tr ng2-st-thead-filters-row *ngIf="!grid.getSetting('hideSubHeader')"
+<tr ng2-st-thead-filters-row *ngIf="!isHideSubHeader"
                               class="ng2-smart-filters"
                               [grid]="grid"
                               [source]="source"
@@ -18,4 +18,4 @@
 <tr ng2-st-thead-form-row *ngIf="grid.createFormShown"
                           [grid]="grid"
                           [createConfirm]="createConfirm">
-</tr>
\ No newline at end of file
+</tr>
diff --git a/src/ng2-smart-table/components/thead/thead.component.ts b/src/ng2-smart-table/components/thead/thead.component.ts
index 30aceed2f..9eeff7227 100644
--- a/src/ng2-smart-table/components/thead/thead.component.ts
+++ b/src/ng2-smart-table/components/thead/thead.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnChanges} from '@angular/core';
 
 import { Grid } from '../../lib/grid';
 import { DataSource } from '../../lib/data-source/data-source';
@@ -7,7 +7,7 @@ import { DataSource } from '../../lib/data-source/data-source';
     selector: '[ng2-st-thead]',
     templateUrl: './thead.component.html',
 })
-export class Ng2SmartTableTheadComponent {
+export class Ng2SmartTableTheadComponent implements OnChanges {
 
     @Input() grid: Grid;
     @Input() source: DataSource;
@@ -18,4 +18,12 @@ export class Ng2SmartTableTheadComponent {
     @Output() selectAllRows = new EventEmitter<any>();
     @Output() create = new EventEmitter<any>();
     @Output() filter = new EventEmitter<any>();
+
+    isHideHeader: boolean;
+    isHideSubHeader: boolean;
+
+  ngOnChanges() {
+      this.isHideHeader = this.grid.getSetting('hideHeader');
+      this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
+    }
 }
diff --git a/src/ng2-smart-table/lib/grid.ts b/src/ng2-smart-table/lib/grid.ts
index f87c720bc..c601bb8d6 100644
--- a/src/ng2-smart-table/lib/grid.ts
+++ b/src/ng2-smart-table/lib/grid.ts
@@ -103,10 +103,10 @@ export class Grid {
       if (deferred.resolve.skipAdd) {
         this.createFormShown = false;
       } else {
-      this.source.prepend(newData).then(() => {
-        this.createFormShown = false;
-        this.dataSet.createNewRow();
-      });       
+        this.source.prepend(newData).then(() => {
+          this.createFormShown = false;
+          this.dataSet.createNewRow();
+        });
       }
     }).catch((err) => {
       // doing nothing
@@ -133,7 +133,7 @@ export class Grid {
       } else {
         this.source.update(row.getData(), newData).then(() => {
           row.isInEditing = false;
-      });
+        });
       }
     }).catch((err) => {
       // doing nothing
diff --git a/src/ng2-smart-table/ng2-smart-table.component.html b/src/ng2-smart-table/ng2-smart-table.component.html
index 3642fd616..7f43d51ca 100644
--- a/src/ng2-smart-table/ng2-smart-table.component.html
+++ b/src/ng2-smart-table/ng2-smart-table.component.html
@@ -1,6 +1,6 @@
-<table [id]="grid.getSetting('attr.id')" [ngClass]="grid.getSetting('attr.class')">
+<table [id]="tableId" [ngClass]="tableClass">
 
-  <thead ng2-st-thead *ngIf="!grid.getSetting('hideHeader') || !grid.getSetting('hideSubHeader')"
+  <thead ng2-st-thead *ngIf="!isHideHeader || !isHideSubHeader"
                       [grid]="grid"
                       [isAllSelected]="isAllSelected"
                       [source]="source"
@@ -26,7 +26,7 @@
 
 </table>
 
-<ng2-smart-table-pager *ngIf="grid.getSetting('pager.display')"
+<ng2-smart-table-pager *ngIf="isPagerDisplay"
                         [source]="source"
                         (changePage)="changePage($event)">
 </ng2-smart-table-pager>
diff --git a/src/ng2-smart-table/ng2-smart-table.component.ts b/src/ng2-smart-table/ng2-smart-table.component.ts
index 8be29d20c..427540193 100644
--- a/src/ng2-smart-table/ng2-smart-table.component.ts
+++ b/src/ng2-smart-table/ng2-smart-table.component.ts
@@ -27,6 +27,13 @@ export class Ng2SmartTableComponent implements OnChanges {
   @Output() createConfirm = new EventEmitter<any>();
   @Output() rowHover: EventEmitter<any> = new EventEmitter<any>();
 
+  tableClass: string;
+  tableId: string;
+  isHideHeader: boolean;
+  isHideSubHeader: boolean;
+  isPagerDisplay: boolean;
+
+
   grid: Grid;
   defaultSettings: Object = {
     mode: 'inline', // inline|external|click-to-edit
@@ -81,13 +88,18 @@ export class Ng2SmartTableComponent implements OnChanges {
       if (changes['settings']) {
         this.grid.setSettings(this.prepareSettings());
       }
-      if (changes['source']) {        
+      if (changes['source']) {
         this.source = this.prepareSource();
         this.grid.setSource(this.source);
       }
     } else {
       this.initGrid();
     }
+    this.tableId = this.grid.getSetting('attr.id');
+    this.tableClass = this.grid.getSetting('attr.class');
+    this.isHideHeader = this.grid.getSetting('hideHeader');
+    this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
+    this.isPagerDisplay = this.grid.getSetting('pager.display');
   }
 
   editRowSelect(row: Row) {
@@ -107,7 +119,7 @@ export class Ng2SmartTableComponent implements OnChanges {
   }
 
   onRowHover(row: Row) {
-      this.rowHover.emit(row);
+    this.rowHover.emit(row);
   }
 
   multipleSelectRow(row: Row) {