Logic in templates

This documentation is a work in progress. It describes prerelease software, and is subject to change.

In this step, you’ll add a loop and a conditional to your LitElement template.

To repeat a part of your HTML template, you can use a JavaScript expression to iterate over an array property:

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

Similarly, to conditionally render some part of your template, you can use a JavaScript expression to examine a boolean property:

${this.myBool ? html`<p>something</p>` : html`<p>something else</p>`}

Starting code

my-element.js

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return { 
      message: { type: String } 
      // TODO: Add a boolean property
      // TODO: Add an array property
    };
  }
  constructor() {
    super();
    this.message = 'Hello world! From my-element';
    // TODO: Initialize boolean property
    // TODO: Initialize array property
  }
  render() {
    return html`
      <p>${this.message}</p>
      <!-- TODO: Add a loop -->
      <!-- TODO: Add a conditional -->
    `;
  }
}
customElements.define('my-element', MyElement);
  

Add a boolean property and an array property to your properties getter.

Replace the static properties getter with the following code:

static get properties() {
  return {
    message: { type: String },
    myBool: { type: Boolean },
    myArray: { type: Array }
  };
}

Initialize the boolean and array properties.

Replace the constructor with the following code:

constructor() {
  super();
  this.message = 'Hello world! From my-element';
  this.myBool = true;
  this.myArray = ['an','array','of','test','data'];
}

Add a loop to your template.

To loop over the new myArray property, add the following code to your template:
```
<ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
```

Add a conditional to your template.

To render conditionally based on the value of myBool, add the following code to your template:

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

Here’s the completed code for this step:

my-element.js

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      message: { type: String },
      myBool: { type: Boolean },
      myArray: { type: Array }
    };
  }
  constructor() {
    super();
    this.message = 'Hello world! From my-element';
    this.myBool = true;
    this.myArray = ['an','array','of','test','data'];
  }
  render() {
    return html`
      <p>${this.message}</p>
      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
      ${this.myBool ?
        html`<p>Render some HTML if myBool is true</p>` :
        html`<p>Render some other HTML if myBool is false</p>`}
    `;
  }
}
customElements.define('my-element', MyElement);

Next: 4. Events