# ngx-lazyload-image

> [![NPM](https://nodei.co/npm/ngx-lazyload-image.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/ngx-lazyload-image/)

Latest version **1.0.2** (published 2018-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-lazyload-image
pnpm add ngx-lazyload-image
yarn add ngx-lazyload-image
bun add ngx-lazyload-image
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-10-30 |
| First published | 2018-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 68.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jalak Vora |
| Maintainers | jkvora |

## Links

- npm: https://www.npmjs.com/package/ngx-lazyload-image
- Homepage: https://github.com/jkvora/ngx-lazyload-image#readme
- Issues: https://github.com/jkvora/ngx-lazyload-image/issues
- npm.io page: https://npm.io/package/ngx-lazyload-image

## Dependencies (1)

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

## Recent versions

- 1.0.2 (latest) — 2018-10-30
- 1.0.1 — 2018-10-30
- 1.0.0 — 2018-10-28

## README

[![NPM](https://nodei.co/npm/ngx-lazyload-image.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/ngx-lazyload-image/)

LazyLoad Image source using directive in Angular.

## Installation

```shell
npm i ngx-lazyload-image --save
```

## Changelog

See the [releases page](https://github.com/jkvora/ngx-lazyload-image/releases) on GitHub.


## Usage

Add `LazyLoadImagesModule` to your app module:

```typescript
import { LazyLoadImagesModule } from 'ngx-lazyload-image';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImagesModule],
  bootstrap: [AppComponent],
})
class AppModule {}
```

In your app component, simply use    a `[lazyload]` directive input,  in place [src] in image tag.
```typescript
@Component({
  selector: 'app',
  template: `
    <div *ngFor="let item of lstImagesUrls;let i=index">
        <img  class="preview" [lazyload]="item.src" (imageInViewEvent)="inView(i)" (imageInViewLoadedEvent)="imageLoaded(i)"            alt="Nature Images" />
        <div class="box" *ngIf="!item.loaded"></div>
    </div>
  `
})
class AppComponent {
  private lstImagesUrls = [
    {
      src: "https://images.unsplash.com/photo-1538390019947-079c808a7315?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f59ae7d8274156b78fc89a2a223f93a3&auto=format&fit=crop&w=668&q=80",
      loaded: false
    },
   
    {
      src: "https://images.unsplash.com/photo-1538215062820-0b0097c60c5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=762ae8c9e9c39ee9ea9c7dd50b3c710f&auto=format&fit=crop&w=772&q=80",
      loaded: false
    },
    {
      src:"https://images.unsplash.com/photo-1538238766844-22cd13f6737a?ixlib=rb-0.3.5&s=af15e80003b63cccfb88bef91e3edb46&auto=format&fit=crop&w=889&q=80",
      loaded: false
    },
  ]


  inView(index) {
    console.log("In view:", index);
    this.lstImagesUrls[index].loaded=true;
  }

  imageLoaded(index) {
    console.log("Image loaded:", index)
   
  }
}
```

## Options

### Inputs

| Property name | Type  | Description |
| ------------- | ---- | ----------- |
| lazyload | string | Source of the image which is to be lazyloaded. 


#### Outputs

| Property name | Description |
| ------------- | ------------------ |
| imageInViewEvent  | Emitted when image comes in viewport |
| imageInViewLoadedEvent  | Emitted when image is loaded .( do thinsg like hide placeholder). |

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