@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 ✅  Displaying 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>