Process SVG on attr changing even if SVG url not changed arkon#134

brnomendes · Dec 29, 2020 · 75002a0 · 75002a0
1 parent f044649
commit 75002a0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/demo/src/demo/demo.component.ts b/demo/src/demo/demo.component.ts
@@ -9,6 +9,8 @@ import { Component, OnInit } from '@angular/core';
     <div [inlineSVG]="'img/symbol.svg#fish'"></div>
     <div [inlineSVG]="'#fish'"></div>
     <div [inlineSVG]="'#fish'" [injectComponent]="true"></div>
+    <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>
   `
 })
@@ -18,6 +20,10 @@ export class DemoComponent implements OnInit {
     'width': '50',
     'height': '50'
   };
+  private _changeAttrs = {
+    'width': '50',
+    'height': '50'
+  };
 
   ngOnInit() {
     setTimeout(() => {
@@ -30,4 +36,11 @@ export class DemoComponent implements OnInit {
     svg.setAttribute('width', '100');
     return svg;
   }
+
+  updateSize(value: number): void {
+    this._changeAttrs = {
+      'width': (parseInt(this._changeAttrs['width'], 10) + value).toString(),
+      'height': (parseInt(this._changeAttrs['height'], 10) + value).toString(),
+    };
+  }
 }
diff --git a/src/inline-svg.directive.ts b/src/inline-svg.directive.ts
@@ -81,8 +81,9 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
   ngOnChanges(changes: SimpleChanges): void {
     if (!this._isValidPlatform() || this._isSSRDisabled()) { return; }
 
-    if (changes['inlineSVG'] || changes['setSVGAttributes']) {
-      this._insertSVG();
+    const setSVGAttributesChanged = Boolean(changes['setSVGAttributes']);
+    if (changes['inlineSVG'] || setSVGAttributesChanged) {
+      this._insertSVG(setSVGAttributesChanged);
     }
   }
 
@@ -92,7 +93,7 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
     }
   }
 
-  private _insertSVG(): void {
+  private _insertSVG(force = false): void {
     if (!isPlatformServer(this.platformId) && !this._supportsSVG) { return; }
 
     // Check if a URL was actually passed into the directive
@@ -102,7 +103,7 @@ export class InlineSVGDirective implements OnInit, OnChanges, OnDestroy {
     }
 
     // Short circuit if SVG URL hasn't changed
-    if (this.inlineSVG === this._prevUrl) {
+    if (!force && this.inlineSVG === this._prevUrl) {
       return;
     }
     this._prevUrl = this.inlineSVG;