angular-pimg
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    AngularPimg

    Angular Pimg

    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-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:

    <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!

    License

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

    Keywords

    none

    Install

    npm i angular-pimg

    DownloadsWeekly Downloads

    9

    Version

    0.1.2

    License

    none

    Unpacked Size

    244 kB

    Total Files

    31

    Last publish

    Collaborators

    • ashinzekene