Editing input type 'object' in the visual editor

Technical Questions
1

Builder content link

Builder public api key
ead261559f404839ad3cfefa101ac88e

What are you trying to accomplish
I have a custom component called BaseRangeSlider with an input with name ‘config’ of type ‘object’ and when I add the component in the visual editor I want to change the value of the fields in the object ‘config’ to change the appearance of my custom component. I can edit the default value of this input in my component but I cant edit the value of ‘config’ in the Visual editor. For more detail see the code example below

Screenshots or video link

Bildschirmfoto 2023-08-09 um 14.11.33
Bildschirmfoto 2023-08-09 um 14.11.331926×733 81 KB

Code stack you are integrating Builder with
Angular

Reproducible code example
import { Component, Input } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { MatSliderModule } from ‘@angular/material/slider’;
import { BuilderBlock } from ‘@builder.io/angular’;

@BuilderBlock({
name: ‘Base Range Slider’,
tag: ‘accp-base-range-slider’,
inputs: [
{
name: ‘config’,
type: ‘object’,
defaultValue: {
startValue: 50,
lowerLimit: 0,
upperLimit: 100,
steps: 1,
type: ‘single’,
},
},
],
})
@Component({
selector: ‘accp-base-range-slider’,
standalone: true,
imports: [CommonModule, MatSliderModule],
templateUrl: ‘./base-range-slider.component.html’,
styleUrls: [‘./base-range-slider.component.scss’],
})
export class BaseRangeSliderComponent {
@Input() config!: IBaseRangeSliderConfig;

protected readonly SliderType = SliderType;
}

export interface IBaseRangeSliderConfig {
startValue: number;
endValue?: number;
lowerLimit: number;
upperLimit: number;
steps: number;
type: SliderType;
}

export enum SliderType {
SINGLE = ‘single’,
DOUBLE = ‘double’,
}

I can give the component a different default value and it works but I cant edit the fields of the input config in the visual editor.

2

Hello Max,

I’ve come across your forum post and would like to offer a suggestion.
Would it be feasible for your use case to break down the config into individual properties? The way builder is interpreting your config object may be causing issues.

Please let me know if there’s anything I’m misunderstanding.

3

You need to declare “subFields”. Ref: Input Types in Builder