Passing data into an Angular component

Technical Questions
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
9dc5088db3194d1288d9d0980bd5befe

What are you trying to accomplish
I have a somewhat working angular implementation using some existing code. I am evaluating builder.io but I am having an issue fulfilling angular inputs. For example, I have configuration data that is required to properly render the component, but with everything I’ve read, I cannot figure out how to get data from the parent to the child. I added an API endpoint that will contain some of the necessary information, but I have no idea where that information “goes”.

Screenshots or video link
The inputs are ‘undefined’

Code stack you are integrating Builder with
Angular 12

Reproducible code example
@Component({
selector: ‘test-comp’,
template: '

{{ test }}

})
class fake implements OnInit {
@Input() test: string;

ngOnInit(): void {
console.log(this.test); // is undefinied
}
}

2

@wkaskie Thanks for the question! At the moment, only our React SDK allows to pass complex data down to custom components. Furthermore currently the Angular SDK uses angular elements. This means they can only accept primitive inputs (string, boolean, number) and not complex ones (object, array, etc).

However I think you have options. You said that your data is available as an API…could you connect the API to your page model and use the data directly on the page to manipulate the component?

Conversely, if there is any functinality within the React SDK that you need, you can get the same level of functionality by registering custom web components, or using symbols

I wonder if one of those options would work for you? Take a look and let us know if you have any further questions !

3

Thanks for the reply. I reviewed the links again and don’t really see how this would work. I was hoping to find some connection between the builder component and the angular component. Even when passing in a string as per the sample code, it isn’t clear “how” to get the information in builder married to the component.

It is possible that our company would be able to deal with a situation where we set a value in builder and we can read it in the component, in a manner separate from Angular’s @Input(). Is there a way to do that? There appears to be a variety of ways to “connect” data to the builder component, but how does the Angular component then read that data?

We have 100,000’s of lines of code that we are looking to reuse in a drag n drop format. All of the components would require the ability to set variables in those components.

4

@wkaskie Apologies, I may have misunderstood your original question, I thought you were trying to pass data from your app into Builder.

If you are only looking to implement inputs (string, int, boolean) for a custom component inside Builder then that is definitely possible with our Angular SDK. Have you tried spinning up one of our Angular examples: builder/examples at main · BuilderIO/builder · GitHub

You can play around with the code there. But a simple example could be if you wanted a custom Button component that contains a link, lets say, you would have your button-component.component.ts:

import { Component, Input, OnInit } from '@angular/core';
import { BuilderBlock } from '@builder.io/angular';

@BuilderBlock({
  tag: 'app-button-component',
  name: 'button',
  inputs: [
    {
      name: 'buttonname',
      type: 'string',
    },
    {
      name: 'buttonlink',
      type: 'url',
    }
  ],
})

@Component({
  selector: 'app-button-component',
  templateUrl: './button-component.component.html',
  styleUrls: ['./button-component.component.css'],
})

export class ButtonComponentComponent implements OnInit {
  @Input() 
  buttonname= '';
  buttonlink= '';

  constructor() { }

  ngOnInit() { }
  
  myFunc(){
    window.alert("Button works!!:)");
  }
  contentLoaded(data) {
    // Data object (via the output $event) includes your custom fields, e.g. if you have a custom field named
  }
}

Then inside your button-component.component.html

<button>
  <a href={{buttonlink}}>
    {{buttonname}}
  </a>
</button>

Within your app.module.ts you would just declare that custom component, and then tie your app to your Builder space with @NgModule declarations and imports like we do here.

Hopefully that offers a little more clarity, I would recommend playing around with the example app and then trying to implement small pieces within your app, based off of our starter code. Let me know how it goes!

5

No apologies necessary!

This is essentially what I have. My app is properly linked and visible and I have the ability to “add a block”. Where I’m still missing the connection, is where is “buttonname” in builder.io? Or in the parent component.

For simplicity, i have in my app.component.html something like:

<builder-component buttonname="test" model="page"></builder-component>

But the ‘buttonname’ value isn’t in the component.

6

Nevermind! I’ve made the connection. The data can be set in the options panel.

Thanks for your help!

1 Like
7

yep! Exactly, those fields are now editable within the Visual Editor itself!

Glad we were able to help! Let me know if you have any more questions

8

A bit of a follow up question(s).

  1. Within the input array, what are the available options for “type”? I’ve seen string and url. Is “json” an option?

  2. When using the data tab, once a connection is set up, how do I funnel that data into the builder project?

9

@wkaskie

  1. these are the types allowed in our React SDK, to be honest I have not tested all of them with Angular SDK, I know string, number, boolean are supported, I would recommend testing them out and seeing if you can find one that works. For JSON, you could possibly just stringify and then do some custom code within the Custom JS+CSS window to parse on the frontend.
  2. If I understand your question, once you have connected data from the data tab, you can bind it to your elements using data bindings. You can see a walkthrough to set up data binding here:
    Connecting dynamic data in Builder's Visual Editor

Let me know if that helps!

10

Thanks Tim! Your help has moved me forward enough to test out a few things. I’m all set for now.

1 Like