CODEWITHSUNDEEP
angularprimeng
Happy Coder
Happy Coder

Reputation: 4692

PrimeNg empty message shown before data is loaded

I am using PrimeNg table to show the data and have added the empty message template like the following :

<ng-template pTemplate="emptymessage">
   <tr>
     <td>
         No records found
      </td>
    </tr>
 </ng-template>

and I am using lazy loading as the data is fetched from the server. I have added a loading flag, which is changed when the http call is finished. The code is as below:

this.myService
    .myHttpCallFunction(params)
    .pipe(
        finalize(() => this.loading = false)
    )
    .subscribe(
        (result: JsendResponse) => this.data = result.data,
         errors => this.errors = errors
    );

I am passing the loading flag to the table and it looks like the following :

 <p-table [value]="data?.data" [columns]="settings.columns" [lazy]="true" [loading]="loading">

The table is loaded from a shared compoent and which accepts data as an input parameter. So the declaration of the data in shared component is like 

@Input()

set data(data) {
   if (data) {
            this._data = data;
            this.total = data.meta.pagination.total;
        }

}

get data(){
    return this._data;
}

Now the table will show No Records Found first for a second and then the data is get loaded. I am assuming this is because the table is loaded before the HTTP response is received. But how can I fix this ?

Upvotes: 2

Views: 2805

Answers (1)

RandomBeginner
RandomBeginner

Reputation: 562

You can avoid this problem by setting a [loading] property on the p-table component template.

<p-table [value]="data" [loading]="loading">
    <ng-template pTemplate="header">
        <tr>
            <th>Colmun</th>
        </tr>
    </ng-template>
    
    <ng-template pTemplate="body" let-c>
        <tr>
            <td>{{c.value}}</td>
        </tr>
    </ng-template>
    
    <ng-template pTemplate="emptymessage" let-c>
        <tr>
            <td [attr.colspan]="c.length">
                No records found
            </td>
        </tr>
    </ng-template>
</p-table>

And in your component.ts file:

loading: boolean = true;

And finally, set it to false when the data is fetched:

ngOnInit() {
    setTimeout(() => {
        // Fetch data here...
        this.loading = false;
    }, 1000);
}

This way, you won't get the empty message before the data is loaded.

Upvotes: 1

Related Questions