feat(table): add custom render component on init function hook

src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts

@@ -1,26 +1,27 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 import { ViewCell } from '../../../../ng2-smart-table';
 
 @Component({
   selector: 'button-view',
   template: `
-    <button (click)="showAlert()">{{ renderValue }}</button>
+    <button (click)="onClick()">{{ renderValue }}</button>
   `,
 })
 export class ButtonViewComponent implements ViewCell, OnInit {
   renderValue: string;
 
   @Input() value: string | number;
+  @Input() rowData: any;
 
-  constructor() { }
+  @Output() save: EventEmitter<any> = new EventEmitter();
 
   ngOnInit() {
     this.renderValue = this.value.toString().toUpperCase();
   }
 
-  showAlert() {
-    alert(this.renderValue);
+  onClick() {
+    this.save.emit(this.rowData);
   }
 }
 
@@ -50,6 +51,11 @@ export class BasicExampleButtonViewComponent implements OnInit {
         title: 'Button',
         type: 'custom',
         renderComponent: ButtonViewComponent,
+        onComponentInitFunction(instance) {
+          instance.save.subscribe(row => {
+            alert(`${row.name} saved!`)
+          });
+        }
       },
     },
   };

src/app/pages/examples/custom-edit-view/custom-render.component.ts

@@ -12,6 +12,7 @@ export class CustomRenderComponent implements ViewCell, OnInit {
   renderValue: string;
 
   @Input() value: string | number;
+  @Input() rowData: any;
 
   ngOnInit() {
     this.renderValue = this.value.toString().toUpperCase();

src/ng2-smart-table/components/cell/cell-view-mode/custom-view.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 
 import { Cell } from '../../../lib/data-set/cell';
+import { ViewCell } from './view-cell';
 
 @Component({
   selector: 'custom-view-component',
@@ -27,11 +28,9 @@ export class CustomViewComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     if (this.cell && !this.customComponent) {
-      const componentFactory = this.resolver.resolveComponentFactory(this.cell.getColumn().renderComponent);
-      this.customComponent = this.dynamicTarget.createComponent(componentFactory);
-
-      // set @Inputs and @Outputs of custom component
-      this.customComponent.instance.value = this.cell.getValue();
+      this.createCustomComponent();
+      this.decorateNgOnInit();
+      this.patchInstance();
     }
   }
 
@@ -40,4 +39,38 @@ export class CustomViewComponent implements OnInit, OnDestroy {
       this.customComponent.destroy();
     }
   }
+
+  protected createCustomComponent() {
+    const componentFactory = this.resolver.resolveComponentFactory(this.cell.getColumn().renderComponent);
+    this.customComponent = this.dynamicTarget.createComponent(componentFactory);
+  }
+
+  protected decorateNgOnInit() {
+    const baseInit = this.customComponent.instance.ngOnInit;
+
+    this.customComponent.instance.ngOnInit = () => {
+      this.callOnComponentInit();
+      this.callBaseInit(baseInit);
+    };
+  }
+
+  protected callOnComponentInit() {
+    const onComponentInitFunction = this.cell.getColumn().getOnComponentInitFunction();
+    onComponentInitFunction && onComponentInitFunction(this.customComponent.instance);
+  }
+
+  protected callBaseInit(baseInit: Function) {
+    baseInit && baseInit.call(this.customComponent.instance);
+  }
+
+  protected patchInstance() {
+    Object.assign(this.customComponent.instance, this.getPatch());
+  }
+
+  protected getPatch(): ViewCell {
+    return {
+      value: this.cell.getValue(),
+      rowData: this.cell.getRow().getData()
+    }
+  }
 }

src/ng2-smart-table/components/cell/cell-view-mode/view-cell.ts

@@ -1,3 +1,4 @@
 export interface ViewCell {
   value: string | number;
+  rowData: any;
 }

src/ng2-smart-table/lib/data-set/column.ts

@@ -18,11 +18,16 @@ export class Column {
   compareFunction: Function;
   valuePrepareFunction: Function;
   filterFunction: Function;
+  onComponentInitFunction: Function;
 
   constructor(public id: string, protected settings: any, protected dataSet: DataSet) {
     this.process();
   }
 
+  getOnComponentInitFunction(): Function {
+    return this.onComponentInitFunction;
+  }
+
   getCompareFunction(): Function {
     return this.compareFunction;
   }
@@ -67,6 +72,7 @@ export class Column {
     this.compareFunction = this.settings['compareFunction'];
     this.valuePrepareFunction = this.settings['valuePrepareFunction'];
     this.filterFunction = this.settings['filterFunction'];
+    this.onComponentInitFunction = this.settings['onComponentInitFunction'];
   }
 
   prepareType(): string {