Conditionals in Thymeleaf

1. Overview

In this tutorial, we’re going to have a look at the different types of conditionals available in Thymeleaf.

For a quick introduction to Thymeleaf, please refer to this article.

2. Maven Dependencies

Let’s start with the Maven dependencies that are required to use Thymeleaf along with Spring:

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

For other Spring releases, the matching thymeleaf-springX library should be used, where X stands for Spring version. Please also note that Spring 5 is supported starting with 3.0.8.RELEASE, by Thymeleaf.

The latest versions of required dependencies can be found here.

3. Thymeleaf Conditionals

We have to distinguish between conditionals which allow us to render text within an HTML element depending on a condition and ones which control the instantiation of an HTML element itself.

Let’s define our Teacher model class which we’ll use throughout this article:

public class Teacher implements Serializable {
    private String gender;
    private boolean isActive;
    private List<String> courses = new ArrayList<>();
    private String additionalSkills;

3.1. Elvis Operator

The Elvis operator ?: lets us render text within an HTML element depending on the current state of a variable.

We can use default expressions to provide a default text if a variable is null:

<td th:text="${teacher.additionalSkills} ?: 'UNKNOWN'" />

In the upper example, we want to display the content of the teacher.additionalSkillsvariable if it is defined and we want the text “UNKNOWN” to be rendered otherwise.

It’s also possible to display arbitrary text depending on a boolean expression:

<td th:text="${teacher.active} ? 'ACTIVE' : 'RETIRED'" />

We can query a simple boolean variable as in the previous example, but string comparisons and range checks are possible as well.

The following comparators and their textual representations are supported> (gt), >= (ge), < (lt), <= (le), == (eq) and != (ne).

3.2. If – Unless

The th:ifandth:unless attributes allow us to render an HTML element depending on a provided condition:

<td>
    <span th:if="${teacher.gender == 'F'}">Female</span>
    <span th:unless="${teacher.gender == 'F'}">Male</span>
</td>

If the content of the teacher.gendervariable equals to an F,then the span element with the value “Female” is rendered.

Otherwise, the element with “Male” is rendered. Such a setup is comparable to an if-else clause present in most programming languages.

3.3. Switch – Case

If there’re more than two possible results of an expression, we can use the th:switch and th:case attributes for conditional rendering of the HTML elements:

<td th:switch="${#lists.size(teacher.courses)}">
    <span th:case="'0'">NO COURSES YET!</span>
    <span th:case="'1'" th:text="${teacher.courses[0]}"></span>
    <div th:case="*">
        <div th:each="course:${teacher.courses}" th:text="${course}"/>
    </div>
</td>

Depending on the size of theteacher.courseslist we either display a default text, the single course or all courses available. The asterisk (*)is used for the default option.

4. Conclusion

In this short article, we investigated the different types of Thymeleaf conditionals and presented some simplified examples showing the various options.

The examples can be found in the GitHub project.