Adding fallbackSVG Input (#164)

* Adding fallbackSVG Input

* Adding fallbackSVG Input in README

* Minor formatting

Co-authored-by: emanuele.fricano <emanuele.fricano@rgigroup.com>
Co-authored-by: arkon <arkon@users.noreply.github.com>

README.md

@@ -77,6 +77,7 @@ The SVG file (if found) will be inserted *inside* the element with the `[inlineS
 | forceEvalStyles | boolean | `false` | Forces embeded style tags' contents to be evaluated (for IE 11). |
 | evalScripts | `'always'`, `'once'`, `'none'` | `'always'` | Whether to evaluate embedded scripts in the loaded SVG files. The `SVGScriptEvalMode` enum is also provided. |
 | fallbackImgUrl | string | | URL for a regular image to be displayed as a fallback if the SVG fails to load. |
+| fallbackSVG | string | | SVG filename to be displayed as a fallback if the SVG fails to load. |
 | onSVGLoaded | `(svg: SVGElement, parent: Element \| null) => SVGElement` | | Lifecycle hook that allows the loaded SVG to be manipulated prior to insertion. |
 
 #### Outputs

demo/src/demo/demo.component.ts

@@ -12,6 +12,7 @@ import { Component, OnInit } from '@angular/core';
     <div><button (click)="updateSize(10)">Increase</button><button (click)="updateSize(-10)">Decrease</button></div>
     <div [inlineSVG]="'#fish'" [setSVGAttributes]="_changeAttrs"></div>
     <div [inlineSVG]="'img/nope.svg'" [fallbackImgUrl]="'https://nodei.co/npm/ng-inline-svg.png?compact=true'"></div>
+    <div [inlineSVG]="'img/nope.svg'" [fallbackSVG]="'#fish'"></div>
   `
 })
 export class DemoComponent implements OnInit {

src/inline-svg.directive.ts

@@ -41,6 +41,7 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
   @Input() forceEvalStyles: boolean = false;
   @Input() evalScripts: SVGScriptEvalMode = SVGScriptEvalMode.ALWAYS;
   @Input() fallbackImgUrl: string;
+  @Input() fallbackSVG: string;
   @Input() onSVGLoaded: (svg: SVGElement, parent: Element | null) => SVGElement;
 
   @Output() onSVGInserted: EventEmitter<SVGElement> = new EventEmitter<SVGElement>();
@@ -198,6 +199,9 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
       this._renderer.setAttribute(elImg, 'src', this.fallbackImgUrl);
 
       this._insertEl(elImg);
+    } else if (this.fallbackSVG && this.fallbackSVG !== this.inlineSVG) {
+      this.inlineSVG = this.fallbackSVG;
+      this._insertSVG();
     }
   }