I am trying to implement a simple SVG display in my component that switches between image A and B on button click. Below is my current template:
<svg>
<use [attr.xlink:href]="getIconLink()"></use>
</svg>
<div (click)="changeImageValue()"></div>
Here is the relevant code for interactivity:
currentIcon = "potato"
changeImageValue() {
if (this.currentIcon == "potato") {
this.currentIcon = "tomato";
} else {
this.currentIcon = "potato";
}
}
getIconLink(): string {
if (this.currentIcon == "potato") {
return "someLinkToAPotato";
} else {
return "someLinkToATomato";
}
}
While inspecting the element in Chrome, I noticed that the href
value updates correctly, but the rendered image does not reload. What could be causing the binding to work properly while the SVG rendering remains unchanged? Is there a way to force a refresh?
I have added logs in all methods and confirmed that they are called at the correct times and change the values as expected. It seems like it's just the rendering of the image that is not updating.