On this page:

• Add properties to a template
• Use loops in a template
• Use conditionals in a template
• Examples

Add properties to a template

To add a property value to a template, insert it with ${this.propName}:

static get properties() {
  return { myProp: String };
}
...
render() { 
  return html`<p>${this.myProp}</p>`; 
}

See also:

• Bind data to child element properties and attributes
• Work with properties

Use loops in a template

Iterate over an array:

html`<ul>
  ${this.myArray.map(i => html`<li>${i}</li>`)}
</ul>`;

See also:

• Compose templates from other templates
• Bind data to child element properties and attributes

Use conditionals in a template

Render based on a Boolean condition:

html`
  ${this.myBool?
    html`<p>Render some HTML if myBool is true</p>`:
    html`<p>Render some other HTML if myBool is false</p>`}
`;

Examples

{% include projects/docs/templates/expressions/my-element.js %}

{% include project.html folder="docs/templates/expressions" openFile="my-element.js" %}