title: Issue in DataTable pagination multi selection for PrimeNG angular2
body: <p>I am using <code>primeng</code> in my <code>angular2</code> application. I am using <code>DataTable</code> for my table view and when I try to do <code>checkbox with paging</code> as explained in <a href="https://www.primefaces.org/primeng/#/datatable/selection" rel="nofollow noreferrer">HERE</a> I am getting errors...</p>
  
  <p>Error ...</p>
  
  <pre><code>Unhandled Promise rejection: Template parse errors:
  Can't bind to 'headerCheckboxToggleAllPages' since it isn't a known property of 'p-dataTable'.
  1. If 'p-dataTable' is an Angular component and it has 'headerCheckboxToggleAllPages' 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. [ERROR -&gt;][headerCheckboxToggleAllPages]="true"&gt;
    &lt;p-col"): ViewProductsComponent@22:36 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: SyntaxError Error: Template parse errors:
  </code></pre>
  
  <p>Do I need to import any specific module for this as the documentation doesn't say on imports and I had similar issue <a href="https://stackoverflow.com/questions/42294880/issue-with-contextmenu-and-crud-table-ngprime-angular2">HERE</a>and after importing the modules it worked.</p>
  
  <p>Here is my view.html</p>
  
  <pre><code>&lt;p-dataTable [value]="cars" [(selection)]="selectedCars3" [paginator]="true" [rows]="5" [headerCheckboxToggleAllPages]="true" sortMode="multiple" [selectionMode]="userRole=='user'? 'none' : 'single' "&gt;
      &lt;p-header&gt;Checkbox Multiple Selection with Paging&lt;/p-header&gt;
      &lt;p-column [style]="{'width':'38px'}" selectionMode="multiple"&gt;&lt;/p-column&gt;
      &lt;p-column field="vin" header="Vin"&gt;&lt;/p-column&gt;
      &lt;p-column field="year" header="Year"&gt;&lt;/p-column&gt;
      &lt;p-column field="brand" header="Brand"&gt;&lt;/p-column&gt;
      &lt;p-column field="color" header="Color"&gt;&lt;/p-column&gt;
      &lt;p-footer&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let car of selectedCars3" style="text-align: left"&gt;{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/p-footer&gt;
  &lt;/p-dataTable&gt;
  </code></pre>
  
  <p>and <code>@NgModule.imports</code> are ...</p>
  
  <pre><code>imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  routing,
  DropdownModule,
  DataTableModule,
  DialogModule,
  ConfirmDialogModule,
  ContextMenuModule,
  PanelModule,
  OverlayPanelModule,
  PanelMenuModule,
  GrowlModule,
  FileUploadModule,
  InputSwitchModule,
  TreeTableModule,
  SharedModule,
  CalendarModule,
  ClipboardModule,
  CommonModule,
  SpinnerModule.forRoot(),
  TabViewModule,
  AutoCompleteModule
  ]
  </code></pre>
  
  <p>My package.json dependencies ...</p>
  
  <pre><code>"dependencies": {
      "@angular/common": "^2.3.1",
      "@angular/compiler": "^2.3.1",
      "@angular/core": "^2.3.1",
      "@angular/forms": "^2.3.1",
      "@angular/http": "^2.3.1",
      "@angular/platform-browser": "^2.3.1",
      "@angular/platform-browser-dynamic": "^2.3.1",
      "@angular/router": "^3.3.1",
      "primeng": "^2.0.1",
      "rxjs": "^5.0.1"
  }
  </code></pre>
  
  <p>I also tried with p<code>primeng:4.1.0-rc.2</code> got same issue. Please suggest. Thanks</p>