diff --git a/demo/src/demo/demo.component.ts b/demo/src/demo/demo.component.ts index c70bb79..80c8ad9 100644 --- a/demo/src/demo/demo.component.ts +++ b/demo/src/demo/demo.component.ts @@ -9,6 +9,8 @@ import { Component, OnInit } from '@angular/core';
+
+
` }) @@ -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 index b75d9d1..8741152 100644 --- 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;