Observables, Change detection and actions

General
1

Hi,

I’m trying to evaluate builder.io for our B2B e-commerce site.

Sorry, I haven’t really followed the suggested post format but as all questions are a bit generic i hope its still OK.

So far I’ve gotten the angular examples working with our API but I’m having some problems with some of the concepts.

If you can point me in the right directions in the docs that would be a great help as my terminology is not great.

Passing data to builder
I was hoping to continue using my existing api services in Angular that all basically returns an observable. Can observables
be used when passing data back to builder (state) or do i have to subscribe in angular and pass the data?

Change detection
From my initial tests I didnt get the change detection to work but it’s of course possible i did somthing wrong.
How do i trigger an update when i refresh my angular services with new parameters? Or should it work directly if i subscribed?

Actions
I have a builder page for customer orders with a dropp down that let you select different order statuses.
When a status is changed the angular services should run again and return orders with the correct status.
I’m guessing i should pass a function that takes order status as input from angular to builder through context.
When dropp down is changed in builder it calls the function and angular triggers the service.
Is this how i should handle this kind of scenario?

Defining inputs in builder
Id like to create a “component” in builder for an “article card” that takes a product ID as input (manualy set for each iteration).
The ID should then be used towards my angular services to retreive data from our api.
Pretty sure this is a common usage but would be very grateful if you could point me to the right docs which are relatable.

2

Hi @earthling, welcome to the forum!

You can find our Angular SDK docs here: builder/packages/angular at main · BuilderIO/builder · GitHub

Passing data to builder/change detection
Yes, you will need to subscribe or do an async pipe in Angular before passing it to Builder state so the changes are detected.

Actions
Yes, you can pass functions to Builder with context . One way could be to add an onChange event handler in the Data tab to your dropdown which calls your filtering function then updates the Builder state variable that holds your table data.

Defining Inputs in Builder
You can take a look at our Angular starter here to see an example of a custom component. Once the input is updated on the Builder side it will be passed back to your webapp to be used however you need.

Hope this helps! Let me know if you still have questions.

3

Thanks for your response. Got everything working now.

Observables
Passing the observable with the async pipe as a property to data was the answer i was looking for.
<builder-component [data]="{orders: orders$ | async}">

Defining inputs
After some more digging it was “editable symbols” i was looking for. From what I’ve understood the input can be accessed in state and used towards my angular service.

4

That’s great to hear. I think I misunderstood the “defining inputs” question, but you are correct. Symbols are similar to custom components but can be built entirely in Builder. Here’s a doc you may find useful if you haven’t already seen it:

https://www.builder.io/c/docs/making-symbols-editable

Another option that may work depending on your use case is custom fields which can be defined in the model options. You can read more about custom fields in the SDK docs and see general information here:

https://www.builder.io/c/docs/custom-fields