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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.