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

Question

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

Answer 1

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

Answer 2

I had a need to know when large images were rendered and used:

window.requestAnimationFrame(x => {
    // its loaded here.
});

You will have to find something to hook into to call the above before you try to load it, etc. Perhaps put it into its own component.