diff --git a/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts b/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts
index ea17f7e62..c4cd1b900 100644
--- a/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts
+++ b/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: `
-
+
`,
})
export class ButtonViewComponent implements ViewCell, OnInit {
renderValue: string;
@Input() value: string | number;
+ @Input() rowData: any;
- constructor() { }
+ @Output() save: EventEmitter = 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!`)
+ });
+ }
},
},
};
diff --git a/src/app/pages/examples/custom-edit-view/custom-render.component.ts b/src/app/pages/examples/custom-edit-view/custom-render.component.ts
index 4ad714b5c..ebea4e547 100644
--- a/src/app/pages/examples/custom-edit-view/custom-render.component.ts
+++ b/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();
diff --git a/src/ng2-smart-table/components/cell/cell-view-mode/custom-view.component.ts b/src/ng2-smart-table/components/cell/cell-view-mode/custom-view.component.ts
index 2da7ba51f..e2316faff 100644
--- a/src/ng2-smart-table/components/cell/cell-view-mode/custom-view.component.ts
+++ b/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()
+ }
+ }
}
diff --git a/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.ts b/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.ts
index cf1f77e28..7091e0c9c 100644
--- a/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.ts
+++ b/src/ng2-smart-table/components/cell/cell-view-mode/view-cell.ts
@@ -1,3 +1,4 @@
export interface ViewCell {
value: string | number;
+ rowData: any;
}
diff --git a/src/ng2-smart-table/lib/data-set/column.ts b/src/ng2-smart-table/lib/data-set/column.ts
index 688721f96..ed1893c9d 100644
--- a/src/ng2-smart-table/lib/data-set/column.ts
+++ b/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 {