title: Primeng data table loading not working
body: <p>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.</p>
  
  <h2>my html</h2>
  
  <pre><code> &lt;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"&gt;
  //coulmns
  &lt;/p-dataTable&gt;
  </code></pre>
  
  <h2> My Service class</h2>
  
  <pre><code> 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&lt;Student[]&gt;{
  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[];
  }
  }
  </code></pre>
  
  <h2> My table component</h2>
  
  <pre><code> 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 =&gt; {
  this.datasource = stuList;
  this.totalRecords = this.datasource.length;
  this.stuList = this.datasource;
  this.loading = false;
  }); 
  }
  </code></pre>
  
  <h2> My App Module class</h2>
  
  <pre><code> 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 { }
  </code></pre>
  
  <p>when I tried above code, showing below error.</p>
  
  <p>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.</p>
  
  <p>Am I missing something? Please help</p>