Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drawcall/angular-infinite-list
A short and powerful infinite scroll list library for angular, with zero dependencies
https://github.com/drawcall/angular-infinite-list
angular angular-scroll angular5 angular6 angular7 angular8 angular9 infinite-lists
Last synced: 13 days ago
JSON representation
A short and powerful infinite scroll list library for angular, with zero dependencies
- Host: GitHub
- URL: https://github.com/drawcall/angular-infinite-list
- Owner: drawcall
- Created: 2017-10-30T04:54:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T14:22:11.000Z (about 1 month ago)
- Last Synced: 2024-10-23T11:42:05.859Z (21 days ago)
- Topics: angular, angular-scroll, angular5, angular6, angular7, angular8, angular9, infinite-lists
- Language: TypeScript
- Homepage: https://drawcall.github.io/angular-infinite-list
- Size: 1.84 MB
- Stars: 80
- Watchers: 3
- Forks: 11
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#
> A short and powerful infinite scroll list library for angular, with zero dependencies 💪
* **Tiny & dependency free** – Only 3kb gzipped
* **Render millions of items**, without breaking a sweat
* **Scroll to index** or **set the initial scroll offset**
* **Supports fixed** or **variable** heights/widths
* **Vertical** or **Horizontal** lists
This 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/).
Check out the [demo](https://drawcall.github.io/angular-infinite-list) for some examples.
Getting Started
---------------
### Using [npm](https://www.npmjs.com/):
```
npm install angular-infinite-list --save
```
### Import angular Infinite list module into your app module
```js
import { InfiniteListModule } from 'angular-infinite-list';
@NgModule({
imports: [
BrowserModule,
FormsModule,
InfiniteListModule,
...
```
### Wrap Infinite list tag around list items
```html
item{{event.start + i}} : {{item|json}}
or directive usage
```
### Upgrade Notice
> In order to be compatible with angularv15+, I upgraded the library.
If or not set. Then you need to use updateEvent to execute the update of the event. Refer to demo1 for details.
### Higher performance usage
> 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.
>
> 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.
> About angular asynchronous, change detection checks and zone.js.
You can view
[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)
#### set @Input `[useob]='true'` and use `ChangeDetectorRef `
You can switch to the Observable mode. of course, if your scene on the efficiency requirements are not high can not do so.
###### demo.component.html
```html
item{{event.start + i}}
```
###### demo.component.ts
>Notice! useob mode update trigger once and otherwise it will trigger multiple times
```
event: ILEvent;
constructor(private cdRef: ChangeDetectorRef) { }
//Notice! useob mode update trigger once and otherwise it will trigger multiple times
update($event: Subject) {
$event.subscribe(x => {
this.event = x;
this.cdRef.detectChanges();
});
}
```
[view demo code](https://github.com/drawcall/angular-infinite-list/blob/master/demo/src/app/components/demo/demo2.component.ts)
### Prop Types
| Property | Type | Required? | Description |
|:------------------|:------------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| width | Number or String* | ✓ | Width of List. This property will determine the number of rendered items when scrollDirection is `'horizontal'`. |
| height | Number or String* | ✓ | Height of List. This property will determine the number of rendered items when scrollDirection is `'vertical'`. |
| data | any[] | ✓ | The data that builds the templates within the Infinite scroll. |
| 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` |
| scrollDirection | String | | Whether the list should scroll vertically or horizontally. One of `'vertical'` (default) or `'horizontal'`. |
| scrollOffset | Number | | Can be used to control the scroll offset; Also useful for setting an initial scroll offset |
| scrollToIndex | Number | | Item index to scroll to (by forcefully scrolling if necessary) |
| 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. |
| 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. |
| 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. |
| update | Output | | This event is fired every time when dom scroll. The event sent by the parameter is a ILEvent object. |
*\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`*
### The IILEvent interface
```
export interface IILEvent {
items: any[],
offset: number,
getStyle(index: number): any,
data?: any[],
start?: number,
stop?: number
}
```
## Reporting Issues
Found an issue? Please [report it](https://github.com/drawcall/angular-infinite-list/issues) along with any relevant details to reproduce it.
## Acknowledgments
This 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/).
Thanks for the great works of author [Claudéric Demers](https://twitter.com/clauderic_d) ❤️
## License
is available under the MIT License.