CODEWITHSUNDEEP
javascriptangulartypescript
Muirik
Muirik

Reputation: 6289

Using *ngIf to Handle Displaying Elements Only AFTER Data Has Loaded

I have some pagination ui that is currently loading before my data arrives in my Angular 2 app. This creates an unwanted visual effect where the pagination ui components start at the top of the page and then move to the bottom once the data populates. I would like to handle this by wrapping the pagination div with an *ngIf statement, so the pagination components won't load before the data is there.

The data is being stored in a "records" variable, and is being iterated over and passed through a paginate pipe in the view like this:

<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 15, currentPage: page, totalItems: customerCount }">

The div with the pagination ui looks like this:

        <div *ngIf="" class="pagination">
            <pagination-controls class="paginator" (pageChange)="page = $event" id="customers"
                    maxSize="15"
                    directionLinks="true"
                    autoHide="true">
            </pagination-controls>
        </div>

You can see above where I'd like to place the *ngIf. My question is, what can I pass to the *ngIf for evaluation here? I tried using *ngIf="records", but that didn't work.

Upvotes: 2

Views: 1887

Answers (1)

Bill Cheng
Bill Cheng

Reputation: 956

Use !!records && records.length>0. Take note that !!records will prevent the null-error if your records variable is null... if you are certain that the variable is always initialized as an array to begin with, you can omit !!records

Upvotes: 3

Related Questions