Skip to content

Instantly share code, notes, and snippets.

@Tallyb
Last active June 22, 2019 06:52
Show Gist options
  • Save Tallyb/b4d65a6d01b147ea9f9e5572f0a23034 to your computer and use it in GitHub Desktop.
Save Tallyb/b4d65a6d01b147ea9f9e5572f0a23034 to your computer and use it in GitHub Desktop.
Complex component
import { Component, Prop, h, JSX, Watch} from '@stencil/core';
@Component({
tag: 'my-complex-prop',
styleUrl: 'complex-prop.css',
shadow: true
})
export class MyComplexPropComponent {
@Prop({mutable: true}) values: Array<string> = [];
toUpper (items: Array<string>) {
return items.map( i => i.toUpperCase());
}
@Watch('values') //this will run everytime values are changed
onValuesChange(newValue: any, oldValue: any) {
this.values = this.toUpper(this.values)
}
componentWillLoad() {
this.values = this.toUpper(this.values);
}
render() : JSX.Element {
return (
<div class="nice">
{this.values.map((item) => {
return <div class="item">
<span>{item}</span>
</div>
})}
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment