Hi! We have created a Angular Application with a component and integrated with Builder. The component seems to have gotten registered as it appears in the Components tab on the side panel. We tried to drag and drop the custom angular component onto the editor. But it is not getting dropped.
The angular code doesn’t show any errors. It compiles and the app runs on localhost.
The attached video shows the problem. The console gives some errors but is not understandable by us.
Would really appreciate your help.
Thanks in advance!
Builder content link
Builder public api key
fb39763560ba4c39959923ab41e49eec
What are you trying to accomplish
I want to drag and drop my custom angular component onto the editor. But it is not getting dropped.
The angular code doesn’t give any errors. It compiles and the app runs on localhost.
Screenshots or video link
Code stack you are integrating Builder with
Angular
Reproducible code example
There are no errors in the Angular Code. If needed, I will send it here
@Sushaanth thanks for that info. Could you please share your code or a reproduction of your issue in a sandbox if possible so we can investigate this further?
The main issues was that your Builder module import and were on the root main.ts and index.html files respectively, and instead should live in app.module.ts and app.component.html instead. Also, going off our Angular example project above above I added some code to the app-routing.module.ts. You can see a diff of the changes here:
Hopefully that all helps! I was able to get it to work on my local after these changes. I recommend you use the example project linked above as a reference as you continue to build out your project !
@TimG
Thank you so much! We cloned your repo, tried it and it works.
In case we need any more help, we will ask here in this amazing forum.
Thanks again!
I tried to write code for giving inputs to the drag-and-drop components but I do not know how to do it exactly. I looked at the Angular example app but couldn’t figure out where I am supposed to add code for getting user inputs while drag and drop.
How do I do this in the latest version of the code you sent? I am trying for move forward from there.
Thanks.
@Sushaanth apologies for delayed response…I just took a look at the code again, I was able to edit the inputs on the Button Set component. One thing to note, the fields are editable on the components that you add to the page within Builder. The <button-component> that is already on the app.component.html won’t necessarily be editable within the Builder UI. Hopefully that helps!
@TimG Hi. I think I wasn’t able to frame my question properly last time. I can enter the inputs, but my question was actually how to display the inputs on the component?
For example, whatever value I input in the Buttonname field should appear on the button as text, and the button link should contain the url to redirect the user on clicking the button.
How do I use these inputs in the code?
@Sushaanth It looks like you need to declare the input decorator within the ButtonComponentComponent class, and then use the declared variables inside the button-component.component.html
in the ButtonComponentComponent class:
@Input()
buttonname= '';
buttonlink= '';
in the button-component.component.html file:
<section>
<div class="example-label">{{buttonname}}</div>
<div class="example-button-row">
<div class="example-flex-container">
<button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
...
I would recommend reading further through the Angular docs, particularly helpful might be components and data patterns here: https://angular.io/guide/inputs-outputs
