Common Code
export interface SomeValue { name: string; value: string; } Passing an Object
import { Component, h, Prop, Watch } from '@stencil/core'; import { SomeValue } from './some-value.interface'; @Component({ tag: 'object-sample', styleUrl: '...', shadow: true }) export class ObjectSample { private _objectData: SomeValue; @Prop() objectData: SomeValue | string; @Watch('objectData') objectDataWatcher(newValue: SomeValue | string) { if (typeof newValue === 'string') { this._objectData = JSON.parse(newValue); } else { this._objectData = newValue; } } componentWillLoad() { this.objectDataWatcher(this.objectData); } render() { return ( <div class='object-data'> <span>{this._objectData.name}</span> <span>{this._objectData.value}</span> </div> ); } } <object-sample object-data='{"name": "Bird", "value": "Chirp"}'> </object-sample> Passing an Array
import { Component, h, Prop, Watch } from '@stencil/core'; import { SomeValue } from './some-value.interface'; @Component({ tag: 'array-sample', styleUrl: '...', shadow: true }) export class ArraySample { private _arrayData: SomeValue[]; @Prop() arrayData: SomeValue[] | string; @Watch('arrayData') arrayDataWatcher(newValue: SomeValue[] | string) { if (typeof newValue === 'string') { this._arrayData = JSON.parse(newValue); } else { this._arrayData = newValue; } } componentWillLoad() { this.arrayDataWatcher(this.arrayData); } render() { return [ <div class='array-size'>{ this._arrayData.length }</div>, this._arrayData.map(x => <div class='row'> <span>{x.name}</span> <span>{x.value}</span> </div> ) ]; } } <array-sample array-data='[{"name": "Cat", "value": "Meow"}, {"name": "Dog", "value": "Woof"}]'> </array-sample> Key Concepts
- The
@Prop()datatype must contain string if a type is defined - Use a
@Watch()function to parse the json string value - Call the
@Watch()function in thecomponentWillLoad()function for the first parse of the json data- The
@Watch()function does not fire on the first load of the component
- The
- The value passed to the
@Prop()must follow strict json syntax
Version Consideration
These examples are Stencil One. If you are using pre @stencil/core@one Check out the Breaking changes document to see what updates are needed to get this sample to work for you in the beta
Top comments (0)