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.
npm install angular-pimg
To use the component, import the module into your app.module.ts
or your preferred module like so:
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)
]
})
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>
Available Pimg Options NOTE: Component options have a higer precedence than global 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 | - |
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
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!
The MIT License (MIT). Please see License File for more information.