Change html class based on variable value

General
1

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.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- Calling jquery first -->
    
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>  
        <style>
            .mygreen{
                background-color:#00ff00;
                color:red;
            }
             .myred{
                background-color:#FF0000;
                color:green;
            }
        </style>
    </head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top" style="background-color: #0d223f;" >
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
        <img src="/images/logo.png" height="36">
    </a>
</div>
</nav>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      One of 2k
      <button class="btn btn-primary" type="button" ng-class="msg.state==='true'?'myred':'mygreen'">Primaryh</button>
    </div>
    <div class="col-md-6">
      2 of 2
    </div>
  </div>
</div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>  
</body>
</html>
2

Wrong formatting.

Try this:

ng-class="{mygreen: msg.state, myred: !msg.state}"
3

Nothing happens.

4

Maybe you are mixing up things. I just tested it with your code.

5 
[{"id":"14a266c3912f0cfa","type":"ui_template","z":"fd95058a.48e3e8","group":"4143016bc7f8443b","name":"","order":7,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div><!DOCTYPE html>\n<html>\n\n<head>\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\"\n        integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n    <!-- Calling jquery first -->\n\n    <script src=\"https://code.jquery.com/jquery-3.6.0.js\"\n        integrity=\"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=\" crossorigin=\"anonymous\"></script>\n    <style>\n        .mygreen {\n            background-color: #00ff00;\n            color: red;\n        }\n\n        .myred {\n            background-color: #FF0000;\n            color: green;\n        }\n    </style>\n</head>\n\n<body>\n    <nav class=\"navbar navbar-expand-lg navbar-dark sticky-top\" style=\"background-color: #0d223f;\">\n        <div class=\"container-fluid\">\n            <a class=\"navbar-brand\" href=\"#\">\n                <img src=\"/images/logo.png\" height=\"36\">\n            </a>\n        </div>\n    </nav>\n    <div class=\"container-fluid\">\n        <div class=\"row\">\n            <div class=\"col-md-6\">\n                One of 2k\n                <button class=\"btn btn-primary\" type=\"button\" ng-class=\"{mygreen: msg.state, myred: !msg.state}\">Primaryh</button>\n            </div>\n            <div class=\"col-md-6\">\n                2 of 2\n            </div>\n        </div>\n    </div>\n    <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\"\n        integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\">\n    </script>\n</body>\n\n</html>","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}]
6

it´s not a ui_template

[
    {
        "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": "<!DOCTYPE html>\n<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n    <!-- Calling jquery first -->\n    \n        <script src=\"https://code.jquery.com/jquery-3.6.0.js\" integrity=\"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=\" crossorigin=\"anonymous\"></script>  \n  \n        <style>\n            .mygreen{\n                background-color:#00ff00;\n                color:blue;\n            }\n            .myred{\n                !background-color:#FF0000;\n                color:white;\n            }\n            .test{\n                 background-color:{{msg.state}};\n            }\n        </style>\n    </head>\n<body>\n    <nav class=\"navbar navbar-expand-lg navbar-dark sticky-top\" style=\"background-color: #0d223f;\" >\n  <div class=\"container-fluid\">\n    <a class=\"navbar-brand\" href=\"#\">\n        <img src=\"/images/logo.png\" height=\"36\">\n    </a>\n</div>\n</nav>\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      One of 2k\n      {{msg.state}}\n      <button id=\"mybutton\" class=\"btn\" type=\"button\" ng-class=\"{mygreen:msg.state,myred:!msg.state}\">Primaryh</button>\n    </div>\n    <div class=\"col-md-6\">\n      2 of 2\n    </div>\n  </div>\n</div>\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script> \n</body>\n</html>",
        "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"
            ]
        ]
    }
]
7

But you are using html/css for an ui_template! (and you have a typo, an exclamation mark in .myred class.)

8

Try this. It is working, I have moved the class determination outside the template:

[{"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":"<!DOCTYPE html>\n<html>\n    <head>\n        <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\">\n    <!-- Calling jquery first -->\n    \n        <script src=\"https://code.jquery.com/jquery-3.6.0.js\" integrity=\"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=\" crossorigin=\"anonymous\"></script>  \n  \n        <style>\n            .mygreen{\n                background-color:#00ff00 !important;\n                color:blue;\n            }\n            .myred{\n                background-color:#FF0000 !important;\n                color:white;\n            }\n            .test{\n                 background-color:{{msg.state}};\n            }\n        </style>\n    </head>\n<body>\n    <nav class=\"navbar navbar-expand-lg navbar-dark sticky-top\" style=\"background-color: #0d223f;\" >\n  <div class=\"container-fluid\">\n    <a class=\"navbar-brand\" href=\"#\">\n        <img src=\"/images/logo.png\" height=\"36\">\n    </a>\n</div>\n</nav>\n<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      One of 2k\n      {{state}}\n      <button id=\"mybutton\"  type=\"button\" class=\"btn {{class}}\">Primaryh</button>\n    </div>\n    <div class=\"col-md-6\">\n      <span class=\"myred\">2 of 2</span>\n    </div>\n  </div>\n</div>\n <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script> \n</body>\n</html>","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"]]}]
9

I think you need to format like {{state}} in a template node.

10

Yes, it's in my example code...

11

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