CODEWITHSUNDEEP
angularng2-smart-table
Anshuman Jaiswal
Anshuman Jaiswal

Reputation: 5462

ng2-smart-table: Calculate other column value from custom renderComponent

I have created a stackblitz for code.

I want to update value of Total column on change of Quantity. In custom component when I update total in data, it's not being updated in UI while data is being updated (I can see it in console).

It's specific problem with ng2-smart-table.

Upvotes: 1

Views: 3499

Answers (1)

Sunil
Sunil

Reputation: 11243

You should use LocalDataSource for source so that you can tell ng2-table that something has been changed and it should refresh the data source.refresh()

Change in app.component.ts

source: LocalDataSource;

Change in setting

 quantity: {
        title: 'Quantity',
        type: 'custom',
        renderComponent: CustomComponent,
        sort: false,
        editable: true,
        onComponentInitFunction: (instance: any) => {
          instance.save.subscribe(row => {
            this.source.refresh();
          });
        }
      },

Change in custom.compnent.ts

export class CustomComponent {

    rowData: any;

   @Output() save: EventEmitter<any> = new EventEmitter();

    onModelChange(table) {
        this.rowData.total = this.rowData.amount * this.rowData.price;
        this.save.emit(this.rowData);
    }
}

Working demo is here - https://stackblitz.com/edit/ng2-smart-table-column-cal-m9nxpg

Upvotes: 3

Related Questions