# ng2-src-fallback
> Angular directive for images fallbacks with the capability of generating On-The-Fly fallbacks
Latest version **1.0.7** (published 2020-04-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install ng2-src-fallback
pnpm add ng2-src-fallback
yarn add ng2-src-fallback
bun add ng2-src-fallback
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.7 |
| Published | 2020-04-17 |
| First published | 2020-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jaime 'Gondola' Oliveira |
| Maintainers | gondolasnus |
| Keywords | angular, angular2, angular5, angular5+, ng2, ng2-src, ng2-src-fallback, img, image, src-fallback, fallback, image-fallback, canvas-to-image, canvas, placeholder, image-placeholder, img-placeholder |
## Links
- npm: https://www.npmjs.com/package/ng2-src-fallback
- Repository: https://github.com/IxquitilisSaid/ng2-src-fallback
- Homepage: https://github.com/IxquitilisSaid/ng2-src-fallback#readme
- Issues: https://github.com/IxquitilisSaid/ng2-src-fallback/issues
- npm.io page: https://npm.io/package/ng2-src-fallback
## Recent versions
- 1.0.7 (latest) — 2020-04-17
- 1.0.4 — 2020-04-16
- 1.0.3 — 2020-04-15
- 1.0.2 — 2020-04-15
- 1.0.1 — 2020-04-14
- 1.0.0 — 2020-04-14
## README
# NG2 SRC FALLBACK
An Angular directive that substitutes the primary image with a fallback should it fail to load.
## Features
- Default fallback - If at first you don't succeed, provide a fallback image to ```[srcFallback]``` input
- On-The-Fly Fallback creation - If for some reason you don't have an image to set as fallback, check the [[customFallbackConfig]](#customFallbackConfig)
## Install
```
npm i --save ng2-src-fallback
```
## Basic Usage
Add the ```Ng2SrcFallbackModule``` module to your module's ```imports```
```typescript
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {Ng2SrcFallbackModule} from 'ng2-src-fallback';
@NgModule({
imports: [
BrowserModule,
Ng2SrcFallbackModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
```
Then add it to your component
```typescript
import {Component} from '@angular/core';
@Component({
selector: 'neat-app',
template: `
`
})
export class AppComponent {
public fallbackImgURL = 'http://placehold.it/200x200';
}
```
## `[customFallbackConfig]`
Let's say, for some reason, you don't have an image you can use as fallback. Instead of providing a value to the ```[srcFallback]``` input, you can use the ```[customFallbackConfig]``` to generate 'On-The-Fly' custom placeholder images.
### `ICustomFallbackConfig`
| Name | Type | Required | Description |
|----------------------|:-----------------------------------:|:-------------------------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| height | String (numeric value and CSS unit) | yes | Height of the generated Image |
| width | String (numeric value and CSS unit) | yes | Width of the generated Image |
| bgColour | String | no | Background colour of the generated Image (String) |
| textSizeAndFont | String (CSS ```font``` property syntax) | no | Styling of the Text inside the generated Image |
| textColour | String | no | Colour of the Text inside the generated Image |
| textContent | String | no | The text you want to display inside the generated Image |
| textAlign | `CanvasTextAlign` | no | The alignment of the text you want to display inside the generated Image
| textBaseline | `CanvasTextBaseline` | no | The Baseline alignment of the text you want to display inside the generated Image
| mimeType | String: 'jpeg' \| 'png' | no | The mime type of the generated Image
### Usage
Add the ```Ng2SrcFallbackModule``` module to your module's ```imports```
```typescript
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app';
import {Ng2SrcFallbackModule} from 'ng2-src-fallback';
@NgModule({
imports: [
BrowserModule,
Ng2SrcFallbackModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
```
Then add it to your component and provide a configuration object to the ```[customFallbackConfig]``` input
```typescript
import {Component} from '@angular/core';
import {ICustomFallbackConfig} from 'ng2-src-fallback/custom-fallback-config';
@Component({
selector: 'neat-app',
template: `
`
})
export class AppComponent {
public customFallbackConfig: ICustomFallbackConfig = {
height: '200px',
width: '200px',
bgColour: 'black',
textSizeAndFont: '20px sans-serif',
textColour: 'white',
textContent: '200x200',
textAlign: 'center',
textBaseline: 'middle',
mimeType: 'jpeg'
};
}
```
## Events
### `(wasLoaded)`
`ng2-src-fallback` exposes a `(wasLoaded)` event that emits when either the `src` or `srcFallback` is loaded.
To determine whether the original source or the fallback was loaded, add a param to your callback for the `(wasLoaded)` event.
#### Example:
First add callback to your component
```typescript
wasLoaded(isFallback: boolean) {
// do something based on 'isFallback'
// or console.log it, don't just take my word
}
```
and then bind it to the `wasLoaded` event
```html
```
### License
[MIT](https://tldrlegal.com/license/mit-license) © [Jaime 'Gondola' Oliveira](https://github.com/IxquitilisSaid)
---
_Source: https://npm.io/package/ng2-src-fallback · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._