# Template Button

**URL:** <https://discourse.nodered.org/t/template-button/81444>\
**Category:** Dashboard\
**Created:** [19 September 2023 21:54 UTC](https://discourse.nodered.org/t/template-button/81444 "2023-09-19T21:54:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ninaaa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ninaaa/32/93493_2.png) [@ninaaa](https://discourse.nodered.org/u/ninaaa)\
**Post date:** [19 September 2023 21:54 UTC](https://discourse.nodered.org/t/template-button/81444/1 "2023-09-19T21:54:18Z")

</div>

I have a button and would hide it via input ON/OFF!

```auto

    <button ng-mousedown="send({payload: 'true'})" ng-mouseup="send({payload: 'false'})"
        class="vibrate filled bigfont" ng-style="{background: !msg.payload ? '#C1CDCD' : '#00FF00' }"> Cool <br/button>

```

What would the code for that look like?

Thanks  
Greetings

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [20 September 2023 05:20 UTC](https://discourse.nodered.org/t/template-button/81444/2 "2023-09-20T05:20:41Z")

</div>

You should be able to add a ng-if  
`ng-if="msg.payload == 'ON'"`

Example flow

```auto
[{"id":"505eb4fc9626326a","type":"ui_switch","z":"b9860b4b9de8c8da","name":"","label":"switch","tooltip":"","group":"8b5cde76.edd58","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"ON","onvalueType":"str","onicon":"","oncolor":"","offvalue":"OFF","offvalueType":"str","officon":"","offcolor":"","animate":false,"className":"","x":330,"y":160,"wires":[["3e4127463aba586b"]]},{"id":"3e4127463aba586b","type":"ui_template","z":"b9860b4b9de8c8da","group":"8b5cde76.edd58","name":"","order":2,"width":0,"height":0,"format":"<button ng-if=\"msg.payload == 'ON'\" ng-mousedown=\"send({payload: 'true'})\" ng-mouseup=\"send({payload: 'false'})\"\n class=\"vibrate filled bigfont\" ng-style=\"{background: !msg.payload ? '#C1CDCD' : '#00FF00' }\"> Cool <br/button>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":240,"wires":[["1c06d852935dd4fe"]]},{"id":"1c06d852935dd4fe","type":"debug","z":"b9860b4b9de8c8da","name":"debug 338","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":690,"y":220,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"default","tab":"8f03e639.85956","order":1,"disp":false,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![ninaaa](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ninaaa/32/93493_2.png) [@ninaaa](https://discourse.nodered.org/u/ninaaa)\
**Post date:** [20 September 2023 09:49 UTC](https://discourse.nodered.org/t/template-button/81444/3 "2023-09-20T09:49:32Z")

</div>

Thanks, that's exactly what I was missing!!!

---

<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:** [20 October 2023 09:50 UTC](https://discourse.nodered.org/t/template-button/81444/4 "2023-10-20T09:50:28Z")

</div>

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