{"id":31680993,"url":"https://github.com/adamczykjac/ngx-paginated","last_synced_at":"2025-10-13T12:09:38.341Z","repository":{"id":318478050,"uuid":"1071358631","full_name":"adamczykjac/ngx-paginated","owner":"adamczykjac","description":"Components and utilities for handling pagination in Angular projects.","archived":false,"fork":false,"pushed_at":"2025-10-07T11:43:54.000Z","size":264,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-07T13:25:35.438Z","etag":null,"topics":["angular","angular-material","data-source","dropdown","pagination","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adamczykjac.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-07T08:38:30.000Z","updated_at":"2025-10-07T11:23:33.000Z","dependencies_parsed_at":"2025-10-07T13:25:51.248Z","dependency_job_id":"0e8b8006-519d-4f18-923f-43600129e4db","html_url":"https://github.com/adamczykjac/ngx-paginated","commit_stats":null,"previous_names":["adamczykjac/ngx-paginated"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/adamczykjac/ngx-paginated","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamczykjac%2Fngx-paginated","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamczykjac%2Fngx-paginated/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamczykjac%2Fngx-paginated/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamczykjac%2Fngx-paginated/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adamczykjac","download_url":"https://codeload.github.com/adamczykjac/ngx-paginated/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adamczykjac%2Fngx-paginated/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279009155,"owners_count":26084554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","data-source","dropdown","pagination","ui"],"created_at":"2025-10-08T07:23:41.047Z","updated_at":"2025-10-12T11:01:41.197Z","avatar_url":"https://github.com/adamczykjac.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NGX Paginated\n\nA collection of Angular libraries and utilities for building efficient, paginated data experiences with infinite scroll, search capabilities, and Material Design integration.\n\n## 📦 Packages\n\nThis monorepo contains the following packages:\n\n### [@ngx-paginated/data-source](./libs/paginated-data-source)\n\nCore data source implementation with built-in pagination, search, and loading states. Works with Angular CDK's `DataSource` interface.\n\n```bash\nnpm install @ngx-paginated/data-source\n```\n\n### [@ngx-paginated/material-autocomplete](./libs/ui/paginated-autocomplete)\n\nMaterial Design autocomplete component with virtual scrolling, infinite scroll, and search capabilities. Built on top of Angular Material.\n\n```bash\nnpm install @ngx-paginated/material-autocomplete\n```\n\n## ✨ Features\n\n- 🚀 **Infinite Scroll** - Load data progressively as users scroll\n- 🔍 **Search Integration** - Built-in debounced search functionality\n- ⚡ **Virtual Scrolling** - Efficient rendering of large lists using Angular CDK\n- 🎨 **Material Design** - Seamless integration with Angular Material\n- 📱 **Responsive** - Works great on mobile and desktop\n- ♿ **Accessible** - ARIA attributes and keyboard navigation support\n- 🔧 **Reactive Forms** - Full integration with Angular's reactive forms\n- 💪 **Type Safe** - Written in TypeScript with full type definitions\n\n## 🎯 Quick Start\n\n### 1. Install Dependencies\n\n```bash\nnpm install @ngx-paginated/data-source @ngx-paginated/material-autocomplete\nnpm install @angular/material @angular/cdk @angular/forms\n```\n\n### 2. Basic Usage\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { PaginatedDataSource } from '@ngx-paginated/data-source';\nimport { PaginatedAutocompleteComponent } from '@ngx-paginated/material-autocomplete';\n\ninterface Item {\n  id: string;\n  label: string;\n}\n\n@Component({\n  selector: 'app-example',\n  template: `\n    \u003cmat-form-field\u003e\n      \u003cngx-paginated-autocomplete\n        [formControl]=\"control\"\n        [items]=\"selectableItems()\"\n        [loading]=\"dataSource.loading()\"\n        [hasMore]=\"dataSource.hasMore()\"\n        (loadMore)=\"dataSource.loadNextPage()\"\n        (searched)=\"dataSource.setQuery($event)\"\n        placeholder=\"Select an item\"\u003e\n      \u003c/ngx-paginated-autocomplete\u003e\n    \u003c/mat-form-field\u003e\n  `\n})\nexport class ExampleComponent {\n  control = new FormControl();\n  \n  dataSource = new PaginatedDataSource\u003cItem\u003e({\n    fetchFn: (params) =\u003e this.fetchItems(params),\n    pageSize: 10,\n    concatData: true,\n    triggerInitialFetch: true\n  });\n  \n  selectableItems = computed(() =\u003e \n    this.dataSource.items().map(item =\u003e ({\n      ...item,\n      isSelected: false,\n      disabled: false\n    }))\n  );\n  \n  fetchItems(params) {\n    // Your API call here\n    return this.http.get('/api/items', { params });\n  }\n}\n```\n\n## 🛠️ Development\n\nThis project uses [Nx](https://nx.dev) for monorepo management and [pnpm](https://pnpm.io) for package management.\n\n### Prerequisites\n\n- Node.js 18+\n- pnpm 8+\n\n### Setup\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all libraries\nnpx nx run-many -t build\n\n# Run demo app\nnpx nx serve demo-app\n\n# Run tests\nnpx nx run-many -t test\n```\n\n### Project Structure\n\n```\n├── apps/\n│   ├── demo-app/           # Demo application\n│   └── demo-app-e2e/       # E2E tests\n├── libs/\n│   ├── paginated-data-source/  # Core data source library\n│   └── ui/\n│       └── paginated-autocomplete/ # Autocomplete component library\n└── dist/                   # Build output\n```\n\n## 📚 Documentation\n\n- [Data Source Documentation](./libs/paginated-data-source/README.md)\n- [Autocomplete Component Documentation](./libs/ui/paginated-autocomplete/README.md)\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT License - see LICENSE file for details\n\n## 🔗 Links\n\n- [Report Issues](https://github.com/yourusername/paginated-data-source/issues)\n- [Demo](https://yourusername.github.io/paginated-data-source)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamczykjac%2Fngx-paginated","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadamczykjac%2Fngx-paginated","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadamczykjac%2Fngx-paginated/lists"}