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"];
  }

}
Parents
No Data
Reply
  • 1320
    Offline posted

    Hello Jason,

    After investigating this further, I noticed that in the igx-paginator tag there is a mismatch in the id:

    [displayDensity]="grid.displayDensity" , however, your grid is workDataGrid. This is the only difference that I see. If it is still not working, I have prepared a sample with your grid’s name and properties, only the data is different.

    Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me along with steps to reproduce.

    Looking forward to hearing from you.

    Regards,
    Monika Kirkova,
    Infragistics

Children