# Subflow - UI Group

**URL:** <https://discourse.nodered.org/t/subflow-ui-group/92068>\
**Category:** Dashboard\
**Created:** [30 September 2024 08:22 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068 "2024-09-30T08:22:17Z")\
**Posts on this page:** 1\
**Showing post:** 11

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 September 2024 11:21 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/11 "2024-09-30T11:21:29Z")

</div>

A lot of the angular stuff like `ng-if` `ng-show` `ng-repeat` have vue equivalents e.g. in vue these are:

- `v-if`: This conditionally renders an element based on a truthy or falsy expression. Similar to ng-if, it removes the element from the DOM when the condition is false.
- `v-show`: This conditionally displays or hides an element based on a truthy or falsy expression. It keeps the element in the DOM, but toggles its display style property.
- `v-for`: This iterates over an array or object, creating a new element for each item. It's similar to ng-repeat, but offers more flexibility and features.

For sending messages back to Node-RED, we have added `send()` functionality so is almost identical. Instead of `ng-click="send({...})` you would do `@click="send({...})`

Regarding your question around an angularjs video you found that got you up and running, I am not certain there is a specific dashboard 2 equivalent video however, there are lots of VUE videos around that cover this. Not trying to dodge the subject but rather state what you learned from the angularjs video can almost directly be applied to Dashboard-2 but using `v-` instead of `ng-`

PS, the [dashboard 2 docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables) DO cover this but to summarise for you here directly.

- element control (equivelants of `ng-xxxx`) are all `v-xxxx`
- attribute binding (e.g. `class`, `disabled`) can be done use the colon.
  - e.g. `:class="msg.myClass"`

- event hookup is done using `@` e.g. `@click="myMethod"`
  - e.g. `@click="send({...})`

Obviously this is scratching the surface but having used both, i can tell you i find personally vue cleaner and faster and easier.

---

_[View the full topic](https://discourse.nodered.org/t/subflow-ui-group/92068)._