# angular-pimg

> ![Angular](https://angular.io/assets/images/logos/angular/angular.png) ![Pimg](pimg.svg)

Latest version **0.1.2** (published 2018-07-31) · 0 weekly downloads

## Install

```sh
npm install angular-pimg
pnpm add angular-pimg
yarn add angular-pimg
bun add angular-pimg
```

## 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.1.2 |
| Published | 2018-07-31 |
| First published | 2018-05-29 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 238.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ashinzekene |

## Links

- npm: https://www.npmjs.com/package/angular-pimg
- npm.io page: https://npm.io/package/angular-pimg

## Dependencies (1)

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

## Recent versions

- 0.1.2 (latest) — 2018-07-31
- 0.1.1 — 2018-07-18
- 0.1.0 — 2018-06-19
- 0.0.5 — 2018-05-29
- 0.0.4 — 2018-05-29
- 0.0.3 — 2018-05-29
- 0.0.2 — 2018-05-29
- 0.0.1 — 2018-05-29

## README

# AngularPimg

![Angular](https://angular.io/assets/images/logos/angular/angular.png)
![Pimg](pimg.svg)

Angular Pimg is a progressive image loader component for Angular applications. It was heavily inspired by [PIMG](https://github.com/ooade/pimg) which is available for React, Vue and Preact.

Like [PIMG](https://github.com/ooade/pimg), it comes in-built with support for Cloudinary Images.


## Installation

```sh
npm install angular-pimg
```

## Usage
To use the component, import the module into your `app.module.ts` or your preferred module like so:

```ts
import { NgModule } from 'angular-pimg';
import { AngularPimg } from 'angular-pimg'; 

const pimgOptions = {
  fetchOnDemand: true,
  className: 'img',
  dataSaver: { wrapperClassName: 'wrapper', buttonClassName: 'my-btn' }
}

@NgModule({
  imports: [
    AngularPimg.forRoot(pimgOptions)
  ]
})

```

## Implementing
You can then use the component like so:

```html
<angular-pimg
[fetchOnDemand]='true'
[placeholder]='"placeholderurl.com/path/to/placeholder"'
[src]='"images.com/path/to/image"'
>
</angular-pimg>
```

## Options

Available Pimg Options
__NOTE:__  Component options have a higer precedence than global options

### Default Options



### Default Options
|Option                     |Description                                            | Type         |Default ( Required )
----------------------------|-------------------------------------------------------|--------------|---------------
| `fetchOnDemand`           | allows image to load once it is visible on screen     | boolean      | true
| `placeholderClassName`    | the class Name for the placeholder image              | string       | pimg__placeholder
| `dataSaver`               | styles to be added to the image element               | false        \| { wrapperClassName: string, buttonClassName: string }     | false
| `className`               | the classname to be added to the image element        | string       | -

### Component Options
|Option                     |Description                                            | Type        |Default ( Required )
----------------------------|------------------------------------------------------|---------------|---------------
| `src`                     | image source                                          | string       | - (true)
| `placeholder`             | image source to preload before real image is fetched  | string       | -*
| `fetchOnDemand`           | allows image to load once it is visible on screen     | boolean      | -
| `placeholderClassName`    | the classname for the placeholder image              | boolean      | -
| `style`                   | styles to be added to the image element               | NgStyles     | -
| `className`               | the classname to be added to the image element        | string       | -
| `dataSaver`               | styles to be added to the image element               | false        \| { wrapperClassName: string, buttonClassName: string }     | false

__*__ Placeholder images are automatically generated for cloudinary images

## Contributions and Open Source stuff
This is an open souce project, feel free to submit isses, and pull requests. Don't forget to star my repo too. Thanks.
Looking for me on Twittter? I am [@ashinzekene](https://twitter.com/ashinzekene)!

## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

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