CODEWITHSUNDEEP
stenciljsstencil-component
Alex
Alex

Reputation: 4811

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

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?

Upvotes: 3

Views: 3339

Answers (1)

Thomas
Thomas

Reputation: 8849

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

  1. Set the property using JavaScript
  2. 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);
    }
  }

Upvotes: 5

Related Questions