Performance improve

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>

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());

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());

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')
+  }
 }

src/ng2-smart-table/components/tbody/cells/edit-delete.component.ts

@@ -1,19 +1,20 @@
-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';
 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');
+  }
 }

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>

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');
+  }
 }

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');
+  }
 }

src/ng2-smart-table/components/thead/cells/actions.component.ts

@@ -1,20 +1,28 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 
 import { Grid } from '../../../lib/grid';
 
 @Component({
   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');
+  }
 }

src/ng2-smart-table/components/thead/cells/add-button.component.ts

@@ -1,28 +1,36 @@
-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';
 
 @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) {
   }
 
   ngAfterViewInit() {
     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();

src/ng2-smart-table/components/thead/rows/thead-filters-row.component.ts

@@ -1,36 +1,48 @@
-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;
 
   @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');
+  }
 }