While working on my Angular 2 app, I encountered an issue with the pagination UI loading before the data arrives. This causes a visual glitch where the pagination components initially appear at the top of the page and then shift to the bottom once the data is populated. To address this issue, I plan to wrap the pagination div with an *ngIf statement so that the pagination components will only load when the data is available.
The data is stored in a variable called "records" and is looped through and processed by a paginate pipe in the view as shown below:
<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 15, currentPage: page, totalItems: customerCount }">
The pagination ui div structure is outlined here:
<div *ngIf="" class="pagination">
<pagination-controls class="paginator" (pageChange)="page = $event" id="customers"
maxSize="15"
directionLinks="true"
autoHide="true">
</pagination-controls>
</div>
I am unsure about what condition to pass to the *ngIf for evaluation in this scenario. I attempted using *ngIf="records", but it did not yield the desired outcome.