I recently delved into learning Angular for a new project. One of my main objectives was finding a way to dynamically alter the styles of SVG elements. This led me to utilizing ViewChild and ElementRef.
Here is an example from the HTML:
<svg><g ...>
<polygon #someTag1 id = "s0" class="st27" points="67,46 58,46 58,56 67,56 67,70 86,70 86,32 67,32"/>
<polygon #someTag2 id = "s1" class="st27" points="104,46 113,46 113,56 104,56 104,70 85,70 85,32 104,32"/>
<polygon #someTag3 id = "s2" class="st27" points="147,46 138,46 138,56 147,56 147,70 166,70 166,32 147,32"/>
In the component file:
@ViewChild("someTag1") someTag1: ElementRef;
ngAfterViewInit() {
this.someTag1.nativeElement.removeAttribute("class");
this.someTag1.nativeElement.setAttribute("class", "shining");
}
This approach successfully achieved what I had in mind.
The challenge arises when I want to modify one element among a large group of diverse elements, not just #someTag1. With 260 different polygons, implementing this solution would require creating 260 ViewChilds...
I have been pondering using ViewChildren and developing separate components or classes for my SVG elements, but I am unsure how to proceed. Is there perhaps another alternative?
Your advice on this matter would be greatly appreciated.