angular-pimg

AngularPimg

Try out a demo

Angular Pimg is a progressive image loader component for Angular applications. It was heavily inspired by PIMG which is available for React, Vue and Preact. Like PIMG, it comes in-built with support for Cloudinary Images.

Installation

npm install angular-pimg

Usage

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

import { NgModule } from '@angular/core';
import { AngularPimgModule } from 'angular-pimg';

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

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

Implementing

You can then use the component like so:

<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 higher precedence than global 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!

License

The MIT License (MIT). Please see License File for more information.