Primeng data table loading not working

Question

I have data table with list of data. I want to display loading icon indicates that data is loading. I can able to display data, But not showing loading icon.

my html

 <p-dataTable [value]="stuList" [rows]="10" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords" [rowsPerPageOptions]="[50,100,150]" [pageLinks]="3" sortMode="multiple" [(selection)]="selectedData"  selectionMode="single" expandableRows="true">
//coulmns
</p-dataTable>

My Service class

 import {Injectable} from '@angular/core';
import {Http, Response,Headers} from '@angular/http';
import {Student} from './student';
import 'rxjs/Rx';

@Injectable()
export class StudentService {
private headers = new Headers({'Content-Type': 'application/json'});
student:Student;
url:any='http:localhost:3002/getStudents';
constructor(private http: Http) {}
//Rest Call
getData(): Observable<Student[]>{
return this.http.get(this.url)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data.request as Student[];
}
}

My table component

 import { Component,OnInit, Input} from '@angular/core';
import { StudentService } from './studentservice.component'
import { Student} from './student'
import { Router }    from '@angular/router';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import {Injectable} from '@angular/core';

@Component({
selector: 'data-grid',
templateUrl: '../app/datagrid.html',
styleUrls: ['../app/datagrid.css']
})
@Injectable()
export class StudentDataGrid implements OnInit {
datasource:Student[];
stuList:Student[];
selectedData:Student; 
@Input()
loading: boolean;
totalRecords:number;
constructor(private studentService:StudentService, private router:Router) {      }
ngOnInit() {
this.loading = true;
//Rest call
this.studentService.getData().subscribe(stuList => {
this.datasource = stuList;
this.totalRecords = this.datasource.length;
this.stuList = this.datasource;
this.loading = false;
}); 
}

My App Module class

 import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';
import { AppComponent }         from './app.component';
import {DataTableModule,SharedModule} from 'primeng/primeng';
import {DialogModule} from 'primeng/primeng';

@NgModule({
imports: [BrowserModule,FormsModule,HttpModule,InMemoryWebApiModule.forRoot(InMemoryDataService,{passThruUnknownUrl:   true}),
AppRoutingModule,DataTableModule,SharedModule,DialogModule ],
declarations: [],providers: [],bootstrap: [ AppComponent ]})
export class AppModule { }

when I tried above code, showing below error.

Can't bind to 'loading' since it isn't a known property of 'p-dataTable'. 1. If 'p-dataTable' is an Angular component and it has 'loading' input, then verify that it is part of this module. 2. If 'p-dataTable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Am I missing something? Please help

If possible share app.moudle.ts(Where you kept @NgModule) and p-table used component ts and html code... — Viraj, Apr 17 '17 at 09:10

score 2 · Accepted Answer · answered Apr 18 '17 at 13:18

I have resolved this by upgrading my Angular2 to angular4 and Primeng2 to primeng4

Need to use PrimeNG-4.we can check change logs after each release;

https://www.primefaces.org/primeng-4-0-0-rc3-released/

https://github.com/primefaces/primeng/issues/2395

score 0 · Answer 2 · answered Apr 17 '17 at 08:27

0

I don't use angular 2 yet. but i think you must place
this.loading = false
inside the callback function.

answered Apr 17 '17 at 08:27

Mohammad Zare

11
2

score 0 · Answer 3 · answered Apr 17 '17 at 08:33

0

You need to use the @Input declarator before the loading property. It's needs to be imported from @angular/core.

answered Apr 17 '17 at 08:33

unitario

6,295
4
30
43

1

Can you publish the entire code for p-dataTable component please. – unitario Apr 17 '17 at 08:54
@stackUser44 remove @Injectable() from your component class, there should be no other but classes following declaration segment. Also @Injectable() should never be used in view components anyways. – unitario Apr 17 '17 at 10:12
Removed, But still getting the same error " If 'p-dataTable' is an Angular component and it has 'loading' input, then verify that it is part of this module." – stackUser44 Apr 17 '17 at 10:15
Have you declared StudentDataGrid in the DataTableModule? – unitario Apr 17 '17 at 10:24
Yes, declared and able to show data. But unable to display loading icon. instead its showing as "No records found". After some time its fetching the data and displaying as i am getting huge data. – stackUser44 Apr 17 '17 at 10:35
If I remove [loading]="loading" its working. or else showing same error – stackUser44 Apr 17 '17 at 10:41
You need to supply the code for p-dataTable not data-grid. That's the component that is giving you error. – unitario Apr 17 '17 at 10:55
In that component add @Input before loading, make sure to import it from @angular/core and see that it it's properly declared in the relevant module. – unitario Apr 17 '17 at 10:57

score 0 · Answer 4 · edited May 23 '17 at 11:54

First of all , you don't need timer function, Before calling make loading true, on your angular service callback you can make it false.

Inside setTimeout call back function "this" is different object, Please see this link for execuation context in js. What is the 'Execution Context' in JavaScript exactly?

 import {DataTableModule,SharedModule,DialogModule} from 'primeng/primeng';
    ngOnInit() {
        this.loading = true;
        this.carService.getCarsSmall().then(cars =>{
                    this.cars = cars;
                    this.loading = false;
        });

}

Showing loading mask, there are different ways, you can search for spinner in Angular 2 and then you can hook to all http calls, you don't need manually write for each http call again.

Primeng data table loading not working

my html

My Service class

My table component

My App Module class

4 Answers4