# Conditional Format of a Template

**URL:** <https://discourse.nodered.org/t/conditional-format-of-a-template/11189>\
**Category:** Dashboard\
**Created:** [15 May 2019 22:56 UTC](https://discourse.nodered.org/t/conditional-format-of-a-template/11189 "2019-05-15T22:56:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrisHofmeister](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chrishofmeister/32/8397_2.png) [@chrisHofmeister](https://discourse.nodered.org/u/chrisHofmeister)\
**Post date:** [15 May 2019 22:56 UTC](https://discourse.nodered.org/t/conditional-format-of-a-template/11189/1 "2019-05-15T22:56:26Z")

</div>

Hi  
I would like to change the color of a dashboard template by the value of msg.payload.

This is what I have inside the template node, but (unfortunately) it is not working:

```auto
<div layout="row" layout-align="center">
    <p ng-style="{color : msg.payload === 'ON' ? 'yellow' : 'grey'}">
        <b>{{msg.payload === 'ON' ? 'ON' : 'OFF'}}</b>    
    </p>
</div>

```

Does anyone know how I can fix this?

Here you can see the nodes I'm using:

```auto
`[{"id":"34477ba4.c07d84","type":"ui_template","z":"883b8d2c.c5a47","group":"702283f5.cd9f1c","name":"Button 35 template","order":16,"width":"1","height":"1","format":"<div layout=\"row\" layout-align=\"center\">\n <p ng-style=\"{color : msg.payload === 'ON' ? 'yellow' : 'grey'}\">\n <b>{{msg.payload === 'ON' ? 'ON' : 'OFF'}}</b> \n </p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1280,"y":1120,"wires":[[]]},{"id":"50a31224.c5176c","type":"mqtt in","z":"883b8d2c.c5a47","name":"Smarthome/Sonoff35/stat/POWER","topic":"Smarthome/Sonoff35/stat/POWER","qos":"2","datatype":"auto","broker":"78c9f2dd.62a9ec","x":460,"y":1120,"wires":[["34477ba4.c07d84"]]},{"id":"702283f5.cd9f1c","type":"ui_group","z":"","name":"Link zu Geräten","tab":"deb86664.557598","order":1,"disp":true,"width":"8","collapse":false},{"id":"78c9f2dd.62a9ec","type":"mqtt-broker","z":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"deb86664.557598","type":"ui_tab","z":"","name":"Admin","icon":"settings","order":2}]`

```

---

<div class="post-metadata">

**Author:** ![chrisHofmeister](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chrishofmeister/32/8397_2.png) [@chrisHofmeister](https://discourse.nodered.org/u/chrisHofmeister)\
**Post date:** [20 May 2019 15:46 UTC](https://discourse.nodered.org/t/conditional-format-of-a-template/11189/2 "2019-05-20T15:46:23Z")

</div>

Does no one have a clue?

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [20 May 2019 15:58 UTC](https://discourse.nodered.org/t/conditional-format-of-a-template/11189/3 "2019-05-20T15:58:44Z")

</div>

Apparently it is working (for what you programmed).

If colors are not changing in your dashboard perhaps you should check below configuration:

Change it to : `Use angular theme in UI template` and test again.

 ![r-01](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0e21089810cb6e60f79efb6986701dde0d0a7e0c.png)

---

<div class="post-metadata">

**Author:** ![chrisHofmeister](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/chrishofmeister/32/8397_2.png) [@chrisHofmeister](https://discourse.nodered.org/u/chrisHofmeister)\
**Post date:** [29 May 2019 14:34 UTC](https://discourse.nodered.org/t/conditional-format-of-a-template/11189/4 "2019-05-29T14:34:14Z")

</div>

That's it. Thanks a lot Andrei! 👍