Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
User42
260
Unable to implement grid paginator
posted

Hello,

I must be missing something simple, but I can't seem to get the igx-paginator template to work. My app won't even build if I add it in. I get the following error:

"Can't bind to 'page' since it isn't a known property of 'igx-paginator'."

Am I missing some type of hook up?

I was basing it off of the example given here: https://stackblitz.com/angular/gkpvooerkqd?file=src%2Fapp%2Fgrid%2Fgrid-pager-sample%2Fgrid-pager-sample.component.html

Here are the relevant (I think) bits of code/config. If I'm missing anything you would need to see, let me know. Thanks

NOTE: I've stripped out code that retrieves my data, so assume that the data is there. The data populates just fine.

package.json:

"igniteui-angular": "9.0.4",
app.module.ts:
imports: [
    CoreModule
  ]
core.module.ts:
import {
IgxGridModule
} from 'igniteui-angular';

@NgModule({
    imports: [
        IgxGridModule,
    ],
    exports: [
        IgxGridModule
    ]
})
export class CoreModule { }
work.component.html:
<igx-grid #workDataGrid id="workDataGrid" [data]="workResults" [paging]="true" [height]="'650px'" (onCellEdit)="cellEditCommit()"
  [width]="'100%'" [primaryKey]="'WorkId'" [perPage]="10" [paginationTemplate]="pager" height="500px"
  width="100%" displayDensity="cosy" >
</igx-grid>

<ng-template #pager>
    <igx-paginator #paginator [(page)]="workDataGrid.page" [totalRecords]="workDataGrid.totalRecords" [(perPage)]="workDataGrid.perPage"
        [dropdownHidden]="isDropdownHidden" [pagerHidden]="isPagerHidden" [selectLabel]="'Records per page:'"
        [dropdownEnabled]="!isDropdownDisabled" [pagerEnabled]="!isPagerDisabled"
        [selectOptions]="selectOptions" [displayDensity]="grid.displayDensity">
    </igx-paginator>
</ng-template>
work.component.ts:
export class WorkComponent implements OnInit {
  workResults: any[];
  public densityOptions: string[];
  public isDropdownHidden = false;
  public isPagerHidden = false;
  public isDropdownDisabled = false;
  public isPagerDisabled = false;
  public selectOptions = [5, 15, 20, 50];

 ngOnInit() {
    this.densityOptions = ["compact", "cosy", "comfortable"];
  }

}