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)