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
– Viraj, Commented Apr 17, 2017 at 9:10

stackUser44 · Accepted Answer · 2017-04-18 13:18:02Z

2

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

answered Apr 18, 2017 at 13:18

stackUser44

4094 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Zare · Accepted Answer · 2017-04-17 08:27:58Z

0

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

answered Apr 17, 2017 at 8:27

Mohammad Zare

112 bronze badges

Comments

unitario · Accepted Answer · 2017-04-17 08:33:43Z

0

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

answered Apr 17, 2017 at 8:33

unitario

6,5854 gold badges33 silver badges43 bronze badges

8 Comments

unitario Over a year ago

Can you publish the entire code for p-dataTable component please.

unitario Over a year ago

@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.

stackUser44 Over a year ago

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."

unitario Over a year ago

Have you declared StudentDataGrid in the DataTableModule?

stackUser44 Over a year ago

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.

|

Community · Accepted Answer · 2017-05-23 11:54:31Z

0

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.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 17, 2017 at 8:54

Viraj

1,4204 gold badges20 silver badges39 bronze badges

Collectives™ on Stack Overflow

Primeng data table loading not working

my html

My Service class

My table component

My App Module class

4 Answers 4

Comments

Comments

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

my html

My Service class

My table component

My App Module class

4 Answers 4

Comments

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related