Napoleonic Political Magnificence

    @this-dot/ng-utils
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.7 • Public • Published

    Ng Utils ⚙️

    @this-dot/ng-utils is a collection of Angular utils which we would like to continuously extend and improve.

    --


    Usage

    Installation

    Install the package:
    npm install @this-dot/ng-utils
    or
    yarn add @this-dot/ng-utils

    useHttpImgSrc pipe

    A pipe for redirecting an <img> tag's src attribute request to use Angular's HttpClient.

    It supports:

     Fetching images using the HttpClient, so the requests will hit all the HttpInterceptor implementations that are needed
     Displaying a custom loading image while the requested image loads
     Displaing a custom error image if the request fails

    Using in your Angular app

    Import the UseHttpImageSourcePipeModule from the package

    import { UseHttpImageSourcePipeModule } from '@this-dot/ng-utils';

    then add it to the imports array in the Angular module with the configurations:

    @NgModule({
      /* other module props  */
      imports: [
        UseHttpImageSourcePipeModule.forRoot({
          loadingImagePath: '/assets/images/your-custom-loading-image.png',
          errorImagePath: 'assets/images/your-custom-error-image.png',
        }),
        /* other modules */
      ],
    })
    export class AppModule {}

    You can omit the configuration, by default the loadingImagePath and the errorImagePath both default to null.

    To use the module's provide pipe, just add UseHttpImageSourcePipeModule in your submodule that uses them. E.g.

    @NgModule({
      /* other module props  */
      imports: [UseHttpImageSourcePipeModule /* other modules */],
    })
    export class YourSubModule {}

    Examples

    useHttpImgSrc pipe with default config

    Use the useHttpImgSrc pipe to request the source image using the HttpClient

    <ng-container *ngFor="let image of images$ | async"
      <img width="200px" [src]="image.src | useHttpImgSrc" />
    </ng-container>

    useHttpImgSrc pipe with custom config

    You can override the default loading and error images with the following syntax:

    <ng-container *ngFor="let image of images$ | async"
      <img width="200px" [src]="image.src | useHttpImgSrc:'/assets/loading.png':'/assets/error.png'" />
    </ng-container>

    Install

    npm i @this-dot/ng-utils

    DownloadsWeekly Downloads

    71

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    54.7 kB

    Total Files

    18

    Last publish

    Collaborators

    • danetdl
    • jtomchak
    • thisdot-devops
    • dustinsgoodman
    • btapai
    • ktrz__