# Ng-bind-html include more than 1 element in Template

**URL:** <https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027>\
**Category:** General\
**Created:** [23 July 2023 22:45 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027 "2023-07-23T22:45:04Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![richiep](https://avatars.discourse-cdn.com/v4/letter/r/59ef9b/32.png) [@richiep](https://discourse.nodered.org/u/richiep)\
**Post date:** [23 July 2023 22:45 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/1 "2023-07-23T22:45:04Z")

</div>

Hey All,  
I recently started converting my dashboard from letters/words to icons using the Material Icons library from google and using CSS to change the colors of the icons.

Here is a static version of what I'm looking for.

```auto
[
    {
        "id": "0ed1c7a3148120c5",
        "type": "ui_template",
        "z": "6759bf7578d65fba",
        "group": "c19b844d5d34a8cd",
        "name": "",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<span style=\"float:left; display: inline; clear:none;\">\n TEST ZONE\n <i class=\"material-icons big-icon\" style=\"color:firebrick; display: inline; font-weight: bolder; font-size: 150%;\">\n power_settings_new\n </i>\n <i class=\"material-icons big-icon\" style=\"color:seagreen; font-size:150%;\">\n lightbulb_outline\n </i>\n <i class=\"material-symbols-outlined\" style=\"color:darkorange; font-size:150%;\">\n mode_fan\n </i>\n <i class=\"material-symbols-outlined\" style=\"color:seagreen; font-size:150%;\">\n volume_up\n </i>\n</span><br />\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 660,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "c19b844d5d34a8cd",
        "type": "ui_group",
        "name": "CLOCK",
        "tab": "c548a45fe690539c",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "c548a45fe690539c",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": true
    }
]

```

But when I try to make the icons change dynamically I'm having a hard time getting multiple variables, i.e. icons, to render in a template. I'm starting out with 2 variables, I'm able to get msgs to dynamically render but never both at the same time.

Here's the code from the template

```auto
<span ng-bind-html="msg.eastLightStatus"></span>
<span ng-bind-html="msg.deerMode"></span>

<!-- The following works halfway, but only renders one msg, the last updated one -->
<span ng-bind-html="(msg.deerMode) + (msg.eastLightStatus)"></span>  

```

How can I get more than one msg to render in this template?

Thanks!  
Rich

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [24 July 2023 23:32 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/2 "2023-07-24T23:32:59Z")

</div>

You can reference the msg properties with mustache format. eg

```auto
<span> {{msg.deerMode}} {{msg.eastLightStatus}} </span>

```

then you can use these properties to specify a colour or icon etc as required.

---

<div class="post-metadata">

**Author:** ![richiep](https://avatars.discourse-cdn.com/v4/letter/r/59ef9b/32.png) [@richiep](https://discourse.nodered.org/u/richiep)\
**Post date:** [25 July 2023 02:02 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/3 "2023-07-25T02:02:59Z")

</div>

> [@Sean-McG](#):
>
> `<span> {{msg.deerMode}} {{msg.eastLightStatus}} </span>`

Hmm, I tried this but using this method sends the icons and text not as html. Also this method also only shows one element at a time.

Still stuck..

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [25 July 2023 03:51 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/4 "2023-07-25T03:51:05Z")

</div>

Not sure what you mean html is basically text, you can put anything the payloads ?  
How are you sending the messages, if both properties don't exist in the msg then you will only see the one that does.

Can you give a better example of what you are sending and what you want it to do ?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [25 July 2023 13:58 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/5 "2023-07-25T13:58:18Z")

</div>

I just had a look at your flow, I think you may be barking up the wrong tree.

I think you will find it a lot easier to use standard dashboard widgets to get the same results.

As an example this is one of my tabs all done with standard widgets.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f27c31a9c308959c9bbc0d691e337f714636b59.png)

---

<div class="post-metadata">

**Author:** ![richiep](https://avatars.discourse-cdn.com/v4/letter/r/59ef9b/32.png) [@richiep](https://discourse.nodered.org/u/richiep)\
**Post date:** [25 July 2023 15:11 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/6 "2023-07-25T15:11:58Z")

</div>

Beautiful! Yes, that's the direction I'm heading in. Please share your flow so I can check it out.

Thanks!  
Rich

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [26 July 2023 01:33 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/7 "2023-07-26T01:33:19Z")

</div>

Some examples of ui switch nodes, note the template is required to allow the use of extra icons from [iconify](https://icon-sets.iconify.design/)

```auto
[
    {
        "id": "db3067a063384197",
        "type": "ui_switch",
        "z": "be14baae.1728",
        "name": "Landing Light Auto",
        "label": "",
        "tooltip": "",
        "group": "c19b844d5d34a8cd",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "auto.landing_light_auto",
        "topicType": "str",
        "style": "",
        "onvalue": "ON",
        "onvalueType": "str",
        "onicon": "iconify-mdi:motion-sensor 34px",
        "oncolor": "#ff8000",
        "offvalue": "OFF",
        "offvalueType": "str",
        "officon": "iconify-mdi:motion-sensor-off 34px",
        "offcolor": "grey",
        "animate": true,
        "className": "",
        "x": 2235,
        "y": 3000,
        "wires": [
            []
        ]
    },
    {
        "id": "094f0e82e8a023fd",
        "type": "ui_switch",
        "z": "be14baae.1728",
        "name": "",
        "label": "Landing Light",
        "tooltip": "",
        "group": "c19b844d5d34a8cd",
        "order": 1,
        "width": 3,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "cmnd/Landing/Power1",
        "topicType": "str",
        "style": "",
        "onvalue": "ON",
        "onvalueType": "str",
        "onicon": "fa-power-off fa-2x",
        "oncolor": "lime",
        "offvalue": "OFF",
        "offvalueType": "str",
        "officon": "fa-power-off fa-2x",
        "offcolor": "grey",
        "animate": true,
        "className": "",
        "x": 2225,
        "y": 3045,
        "wires": [
            []
        ]
    },
    {
        "id": "3748928a8a8d0937",
        "type": "ui_switch",
        "z": "be14baae.1728",
        "name": "lounge_lamp Auto",
        "label": "",
        "tooltip": "",
        "group": "c19b844d5d34a8cd",
        "order": 11,
        "width": 1,
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "auto.lounge_lamp",
        "topicType": "str",
        "style": "",
        "onvalue": "auto",
        "onvalueType": "str",
        "onicon": "iconify-ic:outline-access-time 34px",
        "oncolor": "#ff8000",
        "offvalue": "stop",
        "offvalueType": "str",
        "officon": "iconify-ic:outline-access-time 34px",
        "offcolor": "grey",
        "animate": true,
        "className": "",
        "x": 2235,
        "y": 3090,
        "wires": [
            []
        ]
    },
    {
        "id": "f6fed51b42800712",
        "type": "ui_template",
        "z": "be14baae.1728",
        "group": "c19b844d5d34a8cd",
        "name": "allow iconify",
        "order": 9,
        "width": 0,
        "height": 0,
        "format": "\n<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 2215,
        "y": 2940,
        "wires": [
            []
        ],
        "info": "<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>"
    },
    {
        "id": "c19b844d5d34a8cd",
        "type": "ui_group",
        "name": "CLOCK",
        "tab": "c548a45fe690539c",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "c548a45fe690539c",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [9 August 2023 01:33 UTC](https://discourse.nodered.org/t/ng-bind-html-include-more-than-1-element-in-template/80027/8 "2023-08-09T01:33:40Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.