# How UIBuilder can be integrated in to angular application

**URL:** <https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [22 April 2022 10:44 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640 "2022-04-22T10:44:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![talha48](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/talha48/32/60458_2.png) [@talha48](https://discourse.nodered.org/u/talha48)\
**Post date:** [22 April 2022 10:44 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/1 "2022-04-22T10:44:25Z")

</div>

Hi,  
We want to integrate just uibuilder into anguler application, there users can create flows and import or export flow as json. I could not find any resources how it could be.  
Kindly help me.

Thanks  
Mian Talha

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 April 2022 11:07 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/2 "2022-04-22T11:07:00Z")

</div>

Hi, you will need to explain a bit more about what you want to achieve and how.

So you have an Angular app that creates Node-RED flows and implements them?

In what way do you want to incorporate uibuilder? To the Angular app or as something that users can include in their flows?

---

<div class="post-metadata">

**Author:** ![talha48](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/talha48/32/60458_2.png) [@talha48](https://discourse.nodered.org/u/talha48)\
**Post date:** [22 April 2022 11:23 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/3 "2022-04-22T11:23:10Z")

</div>

Thank you for quick response,

We want that users can create flow on angular app (without connecting to real devices) and then we will push the flow json to Dynamodb.

We want to this interface should be on angular app.

 ![flow](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/c/1c5dcc9d191df7bae0d655d9b90d090a0ed17cc7.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 April 2022 11:52 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/4 "2022-04-22T11:52:04Z")

</div>

No problem. However, I still can't quite see how uibuilder fits into this?

---

<div class="post-metadata">

**Author:** ![talha48](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/talha48/32/60458_2.png) [@talha48](https://discourse.nodered.org/u/talha48)\
**Post date:** [22 April 2022 11:55 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/5 "2022-04-22T11:55:05Z")

</div>

Sorry, May be you can call it flow generation module. Actually we want users to generate flow at angular applications. How can we embed it ?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [22 April 2022 13:12 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/6 "2022-04-22T13:12:47Z")

</div>

Sorry, translation struggles I think.

Are you wanting to be able to generate flows that incorporate a uibuilder node? Or do you want to use uibuilder to help generate the flows?

---

<div class="post-metadata">

**Author:** ![talha48](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/talha48/32/60458_2.png) [@talha48](https://discourse.nodered.org/u/talha48)\
**Post date:** [23 April 2022 06:02 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/7 "2022-04-23T06:02:01Z")

</div>

We want to use uibuilder to help generate the flows?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 April 2022 11:40 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/8 "2022-04-23T11:40:00Z")

</div>

OK. But in that case, uibuilder really only helps with the communications from your front-end to Node-RED. It won't help with the flow building, you will need to do that in Node-RED itself.

So to enable your Angular code to work with uibuilder, all you need to do is to add the library to the web page, start it with `uibuilder.start()` early in your javascript (you may need to put it inside where your Angular app starts up though) and then add a msg listener `uibuilder.onChange('msg', (msg) => { ... })` within your Angular app.

It is the same model as for the VueJS template but using Angular as the framework instead of VueJS.

You can send messages back to node-red using `uibuilder.send({....})` which can be triggered from anywhere in your Angular app.

You can also use the uibuilder node in Node-RED to install your Angular and other front-end dependencies so that you can use them in your web app.

If your web app is already served by a different web server and you don't want to change, all you need to do is load the front-end library from Node-RED and change the start function passing the `path` and `namespace` for the [Socket.IO](http://Socket.IO) client to work correctly. Instructions in the docs.

I'm afraid that I don't use Angular so I don't have any specifics to give.

---

<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:** [22 June 2022 11:40 UTC](https://discourse.nodered.org/t/how-uibuilder-can-be-integrated-in-to-angular-application/61640/9 "2022-06-22T11:40:48Z")

</div>

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