CODEWITHSUNDEEP
javascripthtmlcssangularsvg
George Edwards
George Edwards

Reputation: 9229

Dynamically Colouring graphic in Angular2

I have an angular2 app, and in one of my components, I want to display the performance of various elements of a system. So I have the following graphic:

enter image description here

Which is an svg, so I had thought that I would manually tag the boxes with a #box1, so I could do something like@ViewChild('box1') stage1: ElementRef;, however, any angulr2 additions seem to stop the svg rendering.

My template currently has <object id="img" data="assets/img/big_layout.svg" width="292" height="164"></object> in it.

How can I create an image like this and programmatically change parts of its colour?

I thought maybe this could be drawn in divs and use css, but that would be crazy difficult to get it all to scale properly, but if there is some way to generate this, that could be an option?

Update:

Here is a plunk to show the rendering issues if I put any angular specific code into the svg file.

Upvotes: 1

Views: 395

Answers (1)

yurzui
yurzui

Reputation: 214037

You can't get reference to element inside <object> via ViewChild

As workaround you i can offer you the following way:

view:

<object ... #svg (load)="load(svg.contentDocument)"></object>

component

load(svgDoc) {
  let box1 = svgDoc.getElementById("station1");
}

See also this in action Plunker

Upvotes: 2

Related Questions