Search code examples
angularprimeng-datatable

How to check that a p-datatable has been rendered?

Let say I have a parent and child components. 

<button (click)="downloadReport()">Download Report</button>

<app-child-component [reportMode]="reportMode" (onReportModeReady)="onReportModeReady">
</app-child-component>

On the child component I need to hide/display some PrimeNg Component

<p-datatable #dtNormal ngIf="!reportMode"></p-datatable> //normal data table

<p-datatable#dtReport ngIf="reportMode"></p-datatable> //strip out version for report.

The problem I'm having is that the report is being built before even the normal is hidden and the report table is display.

I'd like to build the report only after the the report table is visible so that the child component can fire an event telling to the parent that's everything is ready.

How do I know that Report primeNG datable is ready?

Thanks

Solution

  • You could search the dom for the element document.getElementById("dtReport"); during each ngAfterViewChecked until it is found. Then emit the event the first time you find it.

    https://angular.io/guide/lifecycle-hooks

    Instead of using ngIf you could toggle the visibility which would be much faster because #dtReport would get created in the dom when the component is created instead of being to create it when reportModel changes.

    fyi p-datatable is deprecated, it has been replaced with p-table