# Change html class based on variable value **URL:** https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482 **Category:** General **Tags:** node-red-dashboard **Created:** [22 July 2022 13:28 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482 "2022-07-22T13:28:43Z") **Posts on this page:** 11 **Page:** 1
### Author: ![scoobie71](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@scoobie71](https://discourse.nodered.org/u/scoobie71) #### Post date: [22 July 2022 13:28 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/1 "2022-07-22T13:28:43Z")
On my message i have a boolean property called state. (msg.state). I am using an html template with a button on it. I havbe created two css classes, one with red background and one with green. When the msg.state is true i want to use the .mygreen{} css class and use the .myred{} when is false. i have tried with ng-class but with no results. ```auto
One of 2k
2 of 2
``` ---
### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca) #### Post date: [22 July 2022 14:48 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/2 "2022-07-22T14:48:49Z")
Wrong formatting. Try this: ```auto ng-class="{mygreen: msg.state, myred: !msg.state}" ``` ---
### Author: ![scoobie71](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@scoobie71](https://discourse.nodered.org/u/scoobie71) #### Post date: [22 July 2022 15:00 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/3 "2022-07-22T15:00:14Z")
Nothing happens. ---
### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca) #### Post date: [22 July 2022 15:01 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/4 "2022-07-22T15:01:51Z")
Maybe you are mixing up things. I just tested it with your code. ---
### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca) #### Post date: [22 July 2022 15:04 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/5 "2022-07-22T15:04:15Z")
```auto [{"id":"14a266c3912f0cfa","type":"ui_template","z":"fd95058a.48e3e8","group":"4143016bc7f8443b","name":"","order":7,"width":0,"height":0,"format":"
\n\n\n\n \n \n\n \n \n\n\n\n \n
\n
\n
\n One of 2k\n \n
\n
\n 2 of 2\n
\n
\n
\n \n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":390,"y":1680,"wires":[[]]},{"id":"7eec05c97af8dd7a","type":"inject","z":"fd95058a.48e3e8","name":"true","props":[{"p":"state","v":"true","vt":"bool"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":180,"y":1660,"wires":[["14a266c3912f0cfa"]]},{"id":"5e3ca389f4032c1e","type":"inject","z":"fd95058a.48e3e8","name":"false","props":[{"p":"state","v":"false","vt":"bool"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":200,"y":1700,"wires":[["14a266c3912f0cfa"]]},{"id":"4143016bc7f8443b","type":"ui_group","name":"Prova test","tab":"5b337e3b.68826","order":8,"disp":true,"width":"6","collapse":false,"className":""},{"id":"5b337e3b.68826","type":"ui_tab","name":"Servizi","icon":"home","order":3,"disabled":false,"hidden":false}] ``` ---
### Author: ![scoobie71](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@scoobie71](https://discourse.nodered.org/u/scoobie71) #### Post date: [22 July 2022 15:10 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/6 "2022-07-22T15:10:52Z")
it´s not a ui\_template ```auto [ { "id": "e81677ea0f64c9d8", "type": "tab", "label": "Flow 1", "disabled": false, "info": "", "env": [] }, { "id": "1df66f1891647d24", "type": "comment", "z": "e81677ea0f64c9d8", "name": "RFID", "info": "", "x": 110, "y": 100, "wires": [] }, { "id": "58a012d43323f84e", "type": "template", "z": "e81677ea0f64c9d8", "name": "", "field": "payload", "fieldType": "msg", "format": "html", "syntax": "mustache", "template": "\n\n \n \n \n \n \n \n \n \n\n \n
\n
\n
\n One of 2k\n {{msg.state}}\n \n
\n
\n 2 of 2\n
\n
\n
\n \n\n", "output": "str", "x": 620, "y": 100, "wires": [ [ "6e88000eb6a23de7" ] ] }, { "id": "27cf6d6fc2fa6db3", "type": "http in", "z": "e81677ea0f64c9d8", "name": "", "url": "/citin/xx", "method": "get", "upload": false, "swaggerDoc": "", "x": 270, "y": 100, "wires": [ [ "03bfd697a5ab8fc7" ] ] }, { "id": "6e88000eb6a23de7", "type": "http response", "z": "e81677ea0f64c9d8", "name": "", "statusCode": "", "headers": {}, "x": 770, "y": 100, "wires": [] }, { "id": "03bfd697a5ab8fc7", "type": "function", "z": "e81677ea0f64c9d8", "name": "", "func": "msg.state=true;\nreturn msg;", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 440, "y": 100, "wires": [ [ "58a012d43323f84e" ] ] } ] ``` ---
### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca) #### Post date: [22 July 2022 15:46 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/7 "2022-07-22T15:46:51Z")
But you are using html/css for an ui\_template! (and you have a typo, an exclamation mark in .myred class.) ---
### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca) #### Post date: [22 July 2022 15:59 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/8 "2022-07-22T15:59:31Z")
Try this. It is working, I have moved the class determination outside the template: ```auto [{"id":"1df66f1891647d24","type":"comment","z":"e81677ea0f64c9d8","name":"RFID","info":"","x":110,"y":100,"wires":[]},{"id":"58a012d43323f84e","type":"template","z":"e81677ea0f64c9d8","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"\n\n \n \n \n \n \n \n \n \n\n \n
\n
\n
\n One of 2k\n {{state}}\n \n
\n
\n 2 of 2\n
\n
\n
\n \n\n","output":"str","x":620,"y":100,"wires":[["6e88000eb6a23de7"]]},{"id":"27cf6d6fc2fa6db3","type":"http in","z":"e81677ea0f64c9d8","name":"","url":"/citin/","method":"get","upload":false,"swaggerDoc":"","x":260,"y":100,"wires":[["03bfd697a5ab8fc7"]]},{"id":"6e88000eb6a23de7","type":"http response","z":"e81677ea0f64c9d8","name":"","statusCode":"","headers":{},"x":770,"y":100,"wires":[]},{"id":"03bfd697a5ab8fc7","type":"function","z":"e81677ea0f64c9d8","name":"","func":"msg.state=true;\n\nmsg.class = msg.state? 'myred' : 'mygreen'\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":100,"wires":[["58a012d43323f84e"]]}] ``` ---
### Author: ![HaroldPetersInskipp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/haroldpetersinskipp/32/42319_2.png) [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp) #### Post date: [22 July 2022 16:05 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/9 "2022-07-22T16:05:05Z")
I think you need to format like `{{state}}` in a `template` node. ---
### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca) #### Post date: [26 July 2022 10:09 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/10 "2022-07-26T10:09:22Z")
Yes, it's in my example code... ---
### 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 2022 10:09 UTC](https://discourse.nodered.org/t/change-html-class-based-on-variable-value/65482/11 "2022-08-09T10:09:27Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.