TableLazyLoadEvent vs LazyLoadEvent

[kvea2git]

Angular: 17.3.8
PrimeNG: 17.16.1

When running ng build, I get the following error, in code that worked under Angular 12.2.3 and PrimeNG 12.1.1. On a p-table, the compiler is looking for TableLazyLoadEvent, not LazyLoadEvent. I cannot find TableLazyLoadEvent in the PrimeNG API. Thanks for any advice.

X [ERROR] NG5: Argument of type 'TableLazyLoadEvent' is not assignable to parameter of type 'LazyLoadEvent'.
  Types of property 'sortField' are incompatible.
    Type 'string | string[]' is not assignable to type 'string'.
      Type 'string[]' is not assignable to type 'string'. [plugin angular-compiler]

projects/kveconnect-ng/src/app/sec_announcement/sec_announcement.html:3:102:
      3 │ ...ents" [lazy]="true" (onLazyLoad)="loadSecAnnouncementsLazy($event)"
        ╵                                                            ~~~~~~
Error occurs in the template of component SecAnnouncementComponent.  
  projects/kveconnect-ng/src/app/sec_announcement/sec_announcement.component.ts:24:15:
      24 │   templateUrl: './sec_announcement.html',
        ╵                ~~~~~~~~~~~~~~~~~~~~~~~~~

Template code

<p-contextMenu #cm [model]="ctxMenuItems"></p-contextMenu>
<p-table #announcetab [value]="secAnnouncements" [lazy]="true" (onLazyLoad)="loadSecAnnouncementsLazy($event)" 
    [paginator]="true" [rows]="10" [totalRecords]="totalRecords" [loading]="loading"
    [columns]="cols"  responsiveLayout="scroll"
    [resizableColumns]="true" dataKey="lineNumber" 
    [contextMenu]="cm" [(contextMenuSelection)]="selectedAnnouncement">

Component code

  // loadLazy method
  loadSecAnnouncementsLazy(event: LazyLoadEvent) {
    const first = event.first as number;
    const size = event.rows as number;
    const sortField = event.sortField as string;
    ...

[kvea2git]

Obviously I can change loadSecAnnouncementsLazy(event: LazyLoadEvent) to event: any and it will at least build but this is not satisfactory

[qwadrox]

You can import as so import { TableLazyLoadEvent } from 'primeng/table';
So the interface is under 'primeng/table'.

[qwadrox]

The docs should be updated regarded.

[adam-badar]

Getting the same issue, were you able to find a fix?

[lumizilla]

Getting the same issue with "primeng": "16.9.15-lts" and "@angular/core": "16.2.12"
@kvea2git Whats the problem with adding "any"? (honest question)

[qwadrox]

Using any means that you’re not enforcing the structure of the data being passed which can result in bugs where properties are missing, incorrectly named, or of the wrong type. There is even an es-lint rule that discourages explicit "any" https://typescript-eslint.io/rules/no-explicit-any.

This rule is enabled by default if you use Angular eslint (it is very recommended)

But you can use the mentioned interface just it has been moved. Import is as so: import { TableLazyLoadEvent } from 'primeng/table';

[lumizilla]

Thank you so much for the answer :) I will update my project accordingly