https://github.com/hacklone/angular2-cool-infinite-grid
Infinite Grid for angular2
https://github.com/hacklone/angular2-cool-infinite-grid
Last synced: about 1 year ago
JSON representation
Infinite Grid for angular2
- Host: GitHub
- URL: https://github.com/hacklone/angular2-cool-infinite-grid
- Owner: Hacklone
- License: mit
- Created: 2016-06-25T21:36:17.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2018-02-21T10:22:49.000Z (over 8 years ago)
- Last Synced: 2024-04-26T05:21:36.628Z (about 2 years ago)
- Language: TypeScript
- Size: 24.4 KB
- Stars: 20
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[npm-url]: https://npmjs.org/package/angular2-cool-infinite-grid
[npm-image]: https://img.shields.io/npm/v/angular2-cool-infinite-grid.svg
[downloads-image]: https://img.shields.io/npm/dm/angular2-cool-infinite-grid.svg
[total-downloads-image]: https://img.shields.io/npm/dt/angular2-cool-infinite-grid.svg
# angular2-cool-infinite-grid [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Total Downloads][total-downloads-image]][npm-url]
Cool Infinite Grid for angular2
## Install
> npm install --save angular2-cool-infinite-grid
## Demo
[View demo on Plunker](https://embed.plnkr.co/8cnYDA/)
## Setup
```javascript
import { NgModule } from '@angular/core';
import { CoolInfiniteGridModule } from 'angular2-cool-infinite-grid';
@NgModule({
imports: [CoolInfiniteGridModule]
})
export class MyAppModule {}
```
## Usage
```javascript
import { Component } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'my-app',
template: `
![]()
{{ item.name }}
`
})
export class MyAppComponent {
myItemIterator;
constructor(private http: Http) {
const self = this;
this.myItemIterator = {
next: function(fromIndex, length) {
return {
value: this.http.get(`/api/items?from${fromIndex}&length=${length}`).toPromise();
};
}
};
}
}
```
Place the ```cool-infinite-grid-container``` attribute on any html element. This element will be the scrolling container.
>Note: ```cool-infinite-grid-container``` won't work on the `````` element as the body element cannot be scrolled.
```html
```
# License
> The MIT License (MIT)
> Copyright (c) 2016 Hacklone
> https://github.com/Hacklone
> Permission is hereby granted, free of charge, to any person obtaining a copy
> of this software and associated documentation files (the "Software"), to deal
> in the Software without restriction, including without limitation the rights
> to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
> copies of the Software, and to permit persons to whom the Software is
> furnished to do so, subject to the following conditions:
> The above copyright notice and this permission notice shall be included in all
> copies or substantial portions of the Software.
> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
> OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
> SOFTWARE.