Builder-Component Unable To Pass Dynamic State

Technical Questions
,
1

I have a Angular v16.2.1 app with @builder.io/angular v3.0.1, I am using builder-component in my angular component -
<builder-component #builderComponent (load)="handleLoadEvent($event)" (error)="handleErrorEvent()" [model]="modelName" [options]="options" [data]="data" [context]="context"> </builder-component>

the data here is quite dynamic and changes per component or user action on a component, for which I have a ‘data angular service’ and which sends Angular signals (or observables)

Whats the problem ?

  • When the data is updated and sets the new data on very update from signal, the builder-component just freezes everything and browser/application becomes unresponsive.

Looks like the builder-component data is not dynamic and doesn’t support multiple updates. How to deal with async data - like this?

Code Snippet :
protected readonly dataEffect =
effect(() => {
const newData = this.dataService.dataSignal();
this.data = newData;
});

Tried with both signal and rxjs Observers, same result.
Even checked Builder.IO examples on Github, but there is none with dynamic data like this.

Code stack you are integrating Builder with
Angular 16

2

Hi @Dhruvesh

Hope you’re doing well!

We are trying to reproduce the issue and will update you ASAP!

3

Hi, @Dhruvesh We checked into this and it seems to be working. If the data is reactive, it should update properly. For example, if we have a count variable and we want to pass it down it will send the updated value down whenever it’s updated

@Component({
  selector: 'app-root',
  template: `   
 <builder-component
      *ngIf="!noBuilderPageForUrl"
      model="page"
      (load)="noBuilderPageForUrl = $event ? false : true"
      (error)="noBuilderPageForUrl = true"
      [data]="{ count: count }"
    >
      <div class="spinner"></div>
    </builder-component>
    <button (click)="count = count + 1">Increment count</button>
    {{ count }}`
})
export class AppComponent {
  noBuilderPageForUrl = false;
  count = 1;
}

Share more details with us so we can investigate why it’s not working at your end!

4

Hi @garima,
Thanks this is resolved. But what I noticed is certain data structures cannot be shared with Builder.IO data. For example something complex like - Angular Service instance or Class instance. (Of course I never intended to share those data :slightly_smiling_face:)
Once I removed those problematic fields/data it worked!

1 Like