Skip to content

Instantly share code, notes, and snippets.

@Tallyb
Created June 7, 2019 17:16
Show Gist options
  • Save Tallyb/3f7dd3aba6665f15f08343e8598bc0df to your computer and use it in GitHub Desktop.
Save Tallyb/3f7dd3aba6665f15f08343e8598bc0df 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) {
//change to upper here
}
componentWillLoad() { // this wi
console.log('Will load', this.values);
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