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 {