Stencil object properties are not set, when they provided through the HTML string

Question

According to documentation, Stencil component's property myProperty

  @Prop({attribute: "my-prop"})
  public myProperty?: object = {};

should be set by using this HTML code:

  <my-component my-prop="{hello: 'world'}" ></my-component>

But, instead, it's set to default value (empty object). Boolean and string values work fine.

Is it a bug, or I've overlooked something?

Stencil does not parse anything other than `boolean` or `number`, so at best you would be getting a string. Does it work if you change the type to `string`? — Thomas, Jun 19 '19 at 14:27
@Thomas According to this example https://stenciljs.com/docs/javascript#watching-props-changes it should parse objects too. Strings work fine, but I don't want to pare JSON manually. — Alex, Jun 19 '19 at 14:35

score 5 · Accepted Answer · answered Jun 19 '19 at 14:51

Stencil does not automatically parse object properties. You have two options:

Set the property using JavaScript
Set it as a HTML attribute (as valid JSON) and manually parse it to an object which you can store in a @State property.

One change to the manual parsing I always include is checking if it's actually an object in case it was set using JavaScript.

  @Watch('myObject')
  parseMyObjectProp(newValue: string | object) {
    if (newValue) {
      this.myInnerObject = typeof newValue === 'object' ? newValue : JSON.parse(newValue);
    }
  }

Stencil object properties are not set, when they provided through the HTML string

1 Answers1

Linked