{"id":15640152,"url":"https://github.com/drawcall/angular-infinite-list","last_synced_at":"2025-07-07T14:02:55.253Z","repository":{"id":38458776,"uuid":"108803253","full_name":"drawcall/angular-infinite-list","owner":"drawcall","description":"A short and powerful infinite scroll list library for angular, with zero dependencies","archived":false,"fork":false,"pushed_at":"2024-10-10T14:22:11.000Z","size":1930,"stargazers_count":80,"open_issues_count":6,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T14:49:53.564Z","etag":null,"topics":["angular","angular-scroll","angular5","angular6","angular7","angular8","angular9","infinite-lists"],"latest_commit_sha":null,"homepage":"https://drawcall.github.io/angular-infinite-list","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drawcall.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2017-10-30T04:54:06.000Z","updated_at":"2024-09-26T08:16:00.000Z","dependencies_parsed_at":"2024-10-03T11:31:50.867Z","dependency_job_id":"dba48db5-d60b-4450-bf66-19f03a434ac2","html_url":"https://github.com/drawcall/angular-infinite-list","commit_stats":{"total_commits":84,"total_committers":5,"mean_commits":16.8,"dds":"0.44047619047619047","last_synced_commit":"49389a3cc039753f564a2f597d5d49c35a6c9f0d"},"previous_names":["a-jie/angular-infinite-list"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fangular-infinite-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fangular-infinite-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fangular-infinite-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drawcall%2Fangular-infinite-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drawcall","download_url":"https://codeload.github.com/drawcall/angular-infinite-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246423731,"owners_count":20774820,"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","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-scroll","angular5","angular6","angular7","angular8","angular9","infinite-lists"],"created_at":"2024-10-03T11:31:38.410Z","updated_at":"2025-03-31T06:09:12.658Z","avatar_url":"https://github.com/drawcall.png","language":"TypeScript","readme":"\u003cdiv align=\"center\" style=\"margin-bottom: 30px;\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/drawcall/angular-infinite-list/master/imgs/logo.png\" width=\"200\"/\u003e\n\u003c/div\u003e\n\n# \n\u003e A short and powerful infinite scroll list library for angular, with zero dependencies 💪\n\n* **Tiny \u0026 dependency free** – Only 3kb gzipped\n* **Render millions of items**, without breaking a sweat\n* **Scroll to index** or **set the initial scroll offset**\n* **Supports fixed** or **variable** heights/widths\n* **Vertical** or **Horizontal** lists\n\nThis library is transplanted from [react-tiny-virtual-list](https://github.com/clauderic/react-tiny-virtual-list) and [react-virtualized](https://github.com/bvaughn/react-virtualized/).   \n\nCheck out the [demo](https://drawcall.github.io/angular-infinite-list) for some examples.\n\nGetting Started\n---------------\n\n### Using [npm](https://www.npmjs.com/):\n```\nnpm install angular-infinite-list --save\n```\n\n### Import angular Infinite list module into your app module\n\n```js\nimport { InfiniteListModule } from 'angular-infinite-list';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    FormsModule,\n    InfiniteListModule,\n    ...\n```\n\n### Wrap Infinite list tag around list items\n\n```html\n\u003cinfinitelist\n    style=\"width:100%\"\n    [width]='\"100%\"' \n    [height]='500' \n    [data]='data' \n    [itemSize]='50' \n    (updateEvent)='event = $event'\u003e\n        \u003cdiv *ngFor=\"let item of event?.items; let i=index;\" [ngStyle]=\"event.getStyle(i)\"\u003e\n            item{{event.start + i}} : {{item|json}}\n        \u003c/div\u003e\n\u003c/infinitelist\u003e\n\nor directive usage\n\u003cdiv infinitelist [width]='\"100%\"' ...\u003c/div\u003e\n``` \n\n### Upgrade Notice\n\u003e In order to be compatible with angularv15+, I upgraded the library.\n\nIf  or not set. Then you need to use updateEvent to execute the update of the event. Refer to demo1 for details.\n\n### Higher performance usage\n\u003e Because in the angular all the asynchronous operation will cause change detection.High-frequency operations such as the scroll event can cause significant performance losses.\n\u003e \n\u003e So in some high-precision scenes, we can use [rxjs](https://github.com/Reactive-Extensions/RxJS) [Observable](https://medium.com/google-developer-experts/angular-introduction-to-reactive-extensions-rxjs-a86a7430a61f) to solve.\n\u003e About angular asynchronous, change detection checks and zone.js.\nYou can view \n[zone.js](https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html) and [change detection](https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html)\n\n#### set @Input `[useob]='true'` and use `ChangeDetectorRef `\nYou can switch to the Observable mode. of course, if your scene on the efficiency requirements are not high can not do so.\n\n###### demo.component.html\n```html\n\u003cinfinitelist\n    [width]='\"100%\"' \n    [height]='500' \n    [data]='data' \n    [itemSize]='150' \n    [useob]='true'\n    (update)='update($event)'\u003e\n        \u003cdiv class=\"li-con\" *ngFor=\"let item of event?.items; let i=index;\" [ngStyle]=\"event.getStyle(i)\"\u003e\n            item{{event.start + i}}\n        \u003c/div\u003e\n\u003c/infinitelist\u003e\n```\n###### demo.component.ts\n\u003eNotice! useob mode update trigger once and otherwise it will trigger multiple times\n\n```\nevent: ILEvent;\nconstructor(private cdRef: ChangeDetectorRef) { }\n  \n//Notice! useob mode update trigger once and otherwise it will trigger multiple times\nupdate($event: Subject\u003cany\u003e) {\n    $event.subscribe(x =\u003e {\n\t\tthis.event = x;\n      \tthis.cdRef.detectChanges();\n\t});\n}\n```\n[view demo code](https://github.com/drawcall/angular-infinite-list/blob/master/demo/src/app/components/demo/demo2.component.ts)\n\n\n### Prop Types\n| Property          | Type              | Required? | Description                                                                                                                                                                                                                                                                                                                                                                                                                          |\n|:------------------|:------------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| width             | Number or String* | ✓         | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`.                                                                                                                                                                                                                                                                                                                     |\n| height            | Number or String* | ✓         | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`.                                                                                                                                                                                                                                                                                                                      |\n| data        | any[]          | ✓         | The data that builds the templates within the Infinite scroll.                                                                                                                                                                                                                                                                        |\n| itemSize          |                   | ✓         | Either a fixed height/width (depending on the scrollDirection), an array containing the heights of all the items in your list, or a function that returns the height of an item given its index: `(index: number): number`                                                                                                                                                                                                           |\n| scrollDirection   | String            |           | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`.                                                                                                                                                                                                                                                                                                                          |\n| scrollOffset      | Number            |           | Can be used to control the scroll offset; Also useful for setting an initial scroll offset                                                                                                                                                                                                                                                                                                                                           |\n| scrollToIndex     | Number            |           | Item index to scroll to (by forcefully scrolling if necessary)                                                                                                                                                                                                                                                                                                                                                                       |\n| scrollToAlignment | String            |           | Used in combination with `scrollToIndex`, this prop controls the alignment of the scrolled to item. One of: `'start'`, `'center'`, `'end'` or `'auto'`. Use `'start'` to always align items to the top of the container and `'end'` to align them bottom. Use `'center`' to align them in the middle of the container. `'auto'` scrolls the least amount possible to ensure that the specified `scrollToIndex` item is fully visible. |\n| overscanCount     | Number            |           | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices.                                                                                                                                                                                                                                                                                   |\n| estimatedItemSize | Number            |           | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered.                                                                                                                                                                                                                                                         |\n| update    | Output          |           | This event is fired every time when dom scroll. The event sent by the parameter is a ILEvent object.                                                                                                                                                                                                                                                                      |\n\n*\\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`*\n\n### The IILEvent interface\n\n```\nexport interface IILEvent {\n    items: any[],\n    offset: number,\n    getStyle(index: number): any,\n    data?: any[],\n    start?: number,\n    stop?: number\n}\n```\n\n## Reporting Issues\nFound an issue? Please [report it](https://github.com/drawcall/angular-infinite-list/issues) along with any relevant details to reproduce it.\n\n## Acknowledgments\nThis library is transplanted from [react-tiny-virtual-list](https://github.com/clauderic/react-tiny-virtual-list) and [react-virtualized](https://github.com/bvaughn/react-virtualized/). \nThanks for the great works of author [Claudéric Demers](https://twitter.com/clauderic_d) ❤️\n\n## License\n is available under the MIT License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcall%2Fangular-infinite-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrawcall%2Fangular-infinite-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawcall%2Fangular-infinite-list/lists"}