How to programmatically trigger refresh primeNG datatable when a button is clicked

Question

I have a refresh button that is outside the primeNG datatable. How do I programmatically trigger to refresh the datatable?

something like this:

Answer 1

The Angular form guide contains a small trick that could be used as a workaround, it consists on recreating the dom by adding *ngIf to the element to control its visibility

visible: boolean = true;
updateVisibility(): void {
  this.visible = false;
  setTimeout(() => this.visible = true, 0);
}

<button (click)="updateVisibility()">
<p-dataTable *ngIf="visible">

Answer 2

If you refresh the list in the component, the table refresh automatically. Example after confirm a delete operation:

import { Component } from '@angular/core';
import { Interface } from '../..//model/interface.model'
import { InterfaceService } from '../../service/interface.service'
import { ButtonModule } from 'primeng/primeng';
import { ConfirmDialogModule, ConfirmationService } from 'primeng/primeng';

@Component({
    templateUrl: './interfaces.component.html'
})
export class InterfacesComponent {

    interfaces: Interface[];

    constructor(
        private interfaceService: InterfaceService,
        private confirmationService: ConfirmationService
    ) { }

    ngOnInit() {
        this.find();
    }

    find() {
        this.interfaceService.query().then(interfaces => this.interfaces = interfaces);
    }

    confirm(id: number) {
        this.confirmationService.confirm({
            message: 'Are you sure that you want to delete this record?',
            accept: () => {
                this.interfaceService.delete(id).then((_interface) => {
                    this.find();
                });            
            }
        });
    }

}

Answer 3

We can have small trick to update the dataTable here: we can recreating the div by adding *ngIf to the element to control its visibility by this it will update dataTable also.

    visible: boolean = true;
    updateVisibility(): void {
      this.visible = false;
    }
    <button (click)="updateVisibility()">

    <div *ngIf="visible">
        <p-dataTable></p-dataTable>
    </div>