Using loops

Inserting data

Use th:text to insert and escape text data.

<!-- Escaped text -->
<p th:text="${x + y}"></p>

Use th:utext for unescaped text (e.g., when you want to render HTML from the data)

<!-- Unescaped HTML content -->
<p th:utext="${htmlContent}"></p>

DANGER

You should always escape content unless you are certain its safe. Anything from userland should always be escaped. Failing to do so can expose your site to hackers.

Iteration

Loop through collections to dynamically generate elements.

<ul>
  <li th:each="bleet : ${bleets}" th:text="${bleet.content}"></li>
</ul>

Attribute replacement

Replace attributes like href, src, etc. This allows us to insert parameters.

<a th:href="@{/bleets/{id}(id=${bleetId})}">View bleet</a>

Conditional rendering

Use th:if to conditionally include elements

<p th:if="${user.loggedIn}">Welcome, user!</p>
<p th:if="${!user.loggedIn}">Please log in.</p>