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 {