\n\n`@this-dot/ng-utils` is a collection of Angular utils which we would like to continuously extend and improve.\n\n--\n\n
\n \n \n \n \n \n
\n\n---\n\n## Usage\n\n### Installation\n\nInstall the package: \n`npm install @this-dot/ng-utils` \nor \n`yarn add @this-dot/ng-utils`\n\n## useHttpImgSrc pipe\n\nA pipe for redirecting an `` tag's `src` attribute request to use Angular's `HttpClient`.\n\nIt supports:\n\n✅ Fetching images using the `HttpClient`, so the requests will hit all the `HttpInterceptor` implementations that are needed \n✅ Displaying a custom loading image while the requested image loads \n✅ Displaying a custom error image if the request fails \n\n### Using in your Angular app\n\nImport the `UseHttpImageSourcePipeModule` from the package\n\n```typescript\nimport { UseHttpImageSourcePipeModule } from '@this-dot/ng-utils';\n```\n\nthen add it to the imports array in the Angular module with the configurations:\n\n```typescript\n@NgModule({\n /* other module props */\n imports: [\n UseHttpImageSourcePipeModule.forRoot({\n loadingImagePath: '/assets/images/your-custom-loading-image.png',\n errorImagePath: 'assets/images/your-custom-error-image.png',\n }),\n /* other modules */\n ],\n})\nexport class AppModule {}\n```\n\nYou can omit the configuration, by default the `loadingImagePath` and the `errorImagePath` both default to `null`.\n\nTo use the module's provide pipe, just add `UseHttpImageSourcePipeModule` in your submodule that uses them. E.g.\n\n```ts\n@NgModule({\n /* other module props */\n imports: [UseHttpImageSourcePipeModule /* other modules */],\n})\nexport class YourSubModule {}\n```\n\n### Examples\n\n#### useHttpImgSrc pipe with default config\n\nUse the `useHttpImgSrc` pipe to request the source image using the `HttpClient`\n\n```html\n\n\n\n```\n\n#### useHttpImgSrc pipe with custom config\n\nYou can override the default loading and error images with the following syntax:\n\n```html\n\n\n\n```\n","readmeFilename":"README.md"}
![](\"https://img.shields.io/badge/%40this--dot-%2Fng--utils-blueviolet\"){kind=icon}
\n ![](\"https://img.shields.io/npm/v/@this-dot/ng-utils\")
\n ![](\"https://github.com/thisdot/open-source/actions/workflows/ci.yml/badge.svg\"){kind=icon}
\n ![](\"https://img.shields.io/npm/l/@this-dot/ng-utils\")
\n ![](\"https://img.shields.io/github/issues/thisdot/open-source?q=is%3Aissue+is%3Aopen+label%3Ang-utils\")
\n