How to render html elements from an item into HABPanel?

Hi all!

Is it possible to render html elements stored in an item into a < div > element of HABPanel widget?

I have an item which stores html code (actually it is an SVG image), which I want to be rendered in the HABPanel.

For example, the item value is


When I use ng-bind-html it does not work as expected:

<div id="wrapper" ng-bind-html="{{ itemValue('Weather_GIS_ConditionIcon') }}"></div>`

results in

<div id="wrapper" ng-bind-html="<b>test</b>"></div>

Any help?

Does this help you at all?
Or are you thinking of something else?

Could your Item value be used to influence the state of the item in the SVG file?

I have a dimmer item that causes different states in an SVG.

No, I’m not using it as a floorplan. I just have a weather svg icon itself stored in the item and need to make it render in HABPanel.

Yes, I was thinking that you could insert an SVG file with multiple states, that are determined by the Item.

Rather than load different SVG files.

It’s only an idea.

Problem solved, ng-bind-html must not have values enclosed in {{ }}

Also, according to this post

some HTML values are treated as unsafe by default so must be processed with $sce.trustAsHtml(html)

1 Like