Angular5+ directive for image fallback
npm install ngx-img-fallback> Load placeholder image on image error
Angular 5+ directive that loads placeholder image on primary image error.
https://stackblitz.com/edit/ngx-img-fallback
```
npm install ngx-img-fallback --save
For Angular 2+ use version 1.2.0
In case you're using `SystemJS` see configuration here
Add module to your module's `imports`
`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app';
import { ImgFallbackModule } from 'ngx-img-fallback';
@NgModule({
imports: [
BrowserModule,
ImgFallbackModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
`
Use it in you component
`typescript
import { Component } from '@angular/core';
@Component({
selector: 'example-app',
template: '
'
})
export class AppComponent {
placeholder = 'http://placehold.it/200x200';
}
`
#### (loaded)
ngx-img-fallback provides (loaded) event which is fired when either src or src-fallback is loaded.(loaded)
To determinate whether original source or fallback is loaded - add a param to your callback for the event.
Example:
First add callback to your component
`typescript`
onLoaded(isFallback: boolean) {
// make somthing based on 'isFallback'
}loaded
and then bind it to the event
`html``