# ngx-lazy-ngfor

> Lazy loading for ngFor.

Latest version **0.0.3** (published 2022-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-lazy-ngfor
pnpm add ngx-lazy-ngfor
yarn add ngx-lazy-ngfor
bun add ngx-lazy-ngfor
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-05-05 |
| First published | 2022-05-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 67.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ruben Santibanez Acosta |
| Maintainers | rubensantibanezacosta |
| Keywords | lazy, lazy-loading, ngx, angular, ngFor, lazy-for, scroll |

## Links

- npm: https://www.npmjs.com/package/ngx-lazy-ngfor
- Repository: https://github.com/rubensantibanezacosta/ngx-lazy-ngfor
- npm.io page: https://npm.io/package/ngx-lazy-ngfor

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.3 (latest) — 2022-05-05
- 0.0.2 — 2022-05-05

## README

# ngx-lazy-ngfor - [Angular](http://angular.io/)

Ngx lazy ngFor is a Typescript library for make angular _ngFor_ lazy, and triggered by scroll event.

## Dependencies

- [Angular](https://angular.io) (_requires_ Angular 13+)


## Installation

Install above dependencies via _npm_, run:

```shell
npm install --save ngx-lazy-ngfor
```

---

Once installed you need to import the main module:

```ts
import { NgxLazyNgforModule } from 'ngx-lazy-ngfor';


@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxLazyNgforModule],
  bootstrap: [AppComponent]
})
export class AppModule {
}
```

## Usage

The library uses only one structural directive `*lazyFor`, and one attribute directive `[lazySize]`


### LazyFor Directive

---

Use this directive to reveal  in batches your **DOM list** upon scroll.

##### Basic Usage

```html
<parentElement>
  <div class="item" *lazyFor="let yourVariable of YourObject">..</div>
</parentElement>
```

Parent element must be scrollable vertically.

You could use the same functionalities of Angular `*ngFor`

##### With Custom Options

As default, you will have 10 elements size list in your viewport, and it will use 10 elements size batches.
You can also pass in a custom  size configuration to the directive, from its parent element.

```html
<parentElement [lazySize]="3">
  <div class="item" *lazyFor="let yourVariable of YourObject">..</div>
</parentElement>
```

This will override the default configuration used when loading de batches of list.

---

## Credits

_[ngx-lazy-ngfor](https://www.npmjs.com/package/ngx-lazy-ngfor)_ - is built by [Ruben Santibañez Acosta](https://github.com/rubensantibanezacosta). Put a :star2: in **[Github](https://github.com/rubensantibanezacosta/ngx-lazy-ngfor)** Please!

---
_Source: https://npm.io/package/ngx-lazy-ngfor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._