2

I have created a custom render component to add buttons to my ng2-smart-table. The buttons are displayed correctly, and I can perform the action. What I want now is to refresh the table when the action is completed.

How can I achieve this? I have added a subscriber in the settings and am emitting event from my Component, but from the settings, how can I call another function to perform refresh of source?

Below is the code: Settings:

TableSettings = {
columns: {              
  documentId: {
    title: 'Document ID'
  },
 button: {
    title: 'Task Actions',
    type: 'custom',
    renderComponent: CustomButtonComponent,
    onComponentInitFunction :(instance: any) => {
      instance.retry.subscribe(row => {
       //TODO Refresh Table
    });}
  }
};

Custom Render Component:

 export class CustomButtonComponent implements ViewCell, OnInit {
  renderValue: string;

  @Input() value: string | number;
  @Input() rowData: any;

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

  constructor(){}

  onRetry() {   
    this.retry.emit(this.rowData);    
  }
}

I have tried writing this.source.refresh(), but get error that can't access property source of undefined.

Logan
  • 2,445
  • 4
  • 36
  • 56

1 Answers1

1

I use the spread operator to refresh the ng2 smart table data:

this.config.results = [...this.config.results];

If you put this line into your code where you have your //TODO marker I think it will work. Not sure because you didn't provide a demo :)

Zendev has a good readable basic breakdown of what this operator does here. I hope this helps!

Martijn Dunnebier
  • 39
  • 4