Components not dropping onto page - Angular Integration

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

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

Reproducible code example
There are no errors in the Angular Code. If needed, I will send it here :slight_smile:

Hi @Sushaanth, are you able to drop other Builder blocks (e.g. text, image) onto the page?

1 Like

Hi! @ancheetah
No, we aren’t able to drop other Builder Blocks onto the page as well.

@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?

@ancheetah Very sorry for the delay. Here is the github link containing the code.

1 Like

@Sushaanth I was able to take a look at your code and after a few tweaks, was able to get it working. I would suggest checking out our Angular example here: builder/examples/angular at main · BuilderIO/builder · GitHub

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 !

1 Like

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!

Hi again! I am having some doubts.

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.

@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?

Apologies for not being clear earlier.

@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:

  buttonname= '';
  buttonlink= '';

in the button-component.component.html file:

    <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:

And continuing to go through our Angular example:

1 Like

@TimG Thank you so much! After your help and some debugging I was able to make it work!

1 Like