@progress/kendo-angular-listview
Version:
Kendo UI Angular listview component
87 lines (86 loc) • 3.41 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, Input } from '@angular/core';
import { Subscription } from 'rxjs';
import { ListViewComponent } from '../listview.component';
import * as i0 from "@angular/core";
import * as i1 from "../listview.component";
/**
* Encapsulates the in-memory handling of paging for the ListView component
* ([see example]({% slug paging_listview %}#toc-binding-directive)).
*
* @example
* ```typescript
* @Component({
* selector: 'my-app',
* template: `
* <kendo-listview [kendoListViewBinding]="listItems">
* <ng-template kendoListViewItemTemplate let-dataItem>
* <div>{{ dataItem.name }}</div>
* </ng-template>
* </kendo-listview>
* `
* })
* export class AppComponent {
* listItems = [{ name: 'Item 1' }, { name: 'Item 2' }];
* }
* ```
* @remarks
* Applied to: {@link ListViewComponent}.
*/
export class DataBindingDirective {
listView;
/**
* Specifies the array of data that populates the ListView.
*/
set data(data) {
this._data = data || [];
this.updateListViewData();
}
get data() {
return this._data;
}
_data;
subscriptions = new Subscription();
constructor(listView) {
this.listView = listView;
}
ngOnInit() {
this.subscriptions.add(this.listView.pageChange.subscribe(this.handlePageChange.bind(this)));
this.subscriptions.add(this.listView.pageSizeChange.subscribe(this.handlePageSizeChange.bind(this)));
this.updateListViewData();
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
handlePageChange(event) {
this.listView.skip = event.skip;
this.listView.pageSize = event.take;
this.updateListViewData();
}
handlePageSizeChange(event) {
this.listView.pageSize = Number(event.newPageSize);
}
updateListViewData() {
const from = this.listView.skip || 0;
const to = from + (this.listView.pageSize || this.data.length);
this.listView.data = {
data: this.data.slice(from, to),
total: this.data.length
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DataBindingDirective, isStandalone: true, selector: "[kendoListViewBinding]", inputs: { data: ["kendoListViewBinding", "data"] }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataBindingDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoListViewBinding]',
standalone: true
}]
}], ctorParameters: () => [{ type: i1.ListViewComponent }], propDecorators: { data: [{
type: Input,
args: ['kendoListViewBinding']
}] } });