1. Introduction

In this post, we will learn how to use supported conditional statements to display web content using Thymeleaf. We will learn th:if, th:unless, th:switch, th:case and conditional expressions by examples.

2. Using th:if Tag

Let’s create a method that returns a boolean state of selected months under MonthGroup model object that we created in our previous article.

public class MonthGroup {

    private List<Month> months;

    // setters getters

    public boolean isMonthSelected() {
        if (months == null)
         return false;
        return months.stream().filter(month -> month.getChecked() != null && month.getChecked()).findFirst().isPresent();

Now, we will use the isMonthSelected method to check if any month is selected while submitting the form. Let’s create a condition using th:if.

<div th:if="${monthGroup.monthSelected}">
  <h2>Selected months</h2>
  <div th:each="month, stat: ${monthGroup.months}" th:if="${month.checked}">
    <span th:text="${month.name}"></span>

3. Using th:unless Tag

Using if we can get a list of selected months during form submission. What if we would like to display all unselected months, we can get it by including a negate or using th:unless that works as negate.

Let’s create a condition using th:unless tag to display unselected months.

<h2>Unselected months</h2>
<div th:each="month, stat: ${monthGroup.months}" th:unless="${month.checked}">
  <span th:text="${month.name}"></span>

4. Using th:switch th:case Tag

Let’s show selected months seasons using th:switch th:case tags.

<h2>Selected Months Seasons</h2>
<div th:each="month, stat: ${monthGroup.months}" th:if="${month.checked}">
  <div th:switch="${month.name}">
    <span th:case="#{month.dec}">It's Winter in </span>
    <span th:case="#{month.jan}">It's Winter in </span>
    <span th:case="#{month.feb}">It's Winter in </span>
    <span th:case="#{month.mar}">It's Spring in </span>
    <span th:case="#{month.apr}">It's Spring in </span>
    <span th:case="#{month.may}">It's Spring in </span>
    <span th:case="#{month.jun}">It's Summer in </span>
    <span th:case="#{month.jul}">It's Summer in </span>
    <span th:case="#{month.aug}">It's Summer in </span>
    <span th:case="*">It's Autumn in </span>
    <b><span th:text="${month.name}"></span></b>

Above code displays seasons for different selected months. If you carefully look at the case statements, there are duplicate markup elements for the same season. Unfortunately, Thymeleaf doesn’t support multiple cases of fall through in current versions.

5. Conditional Expressions

Thymeleaf supports using the ternary operator to add conditional attributes under markup elements.

Let’s use a conditional attribute to apply appropriate styling class of selected months.

<div th:each="month, stat: ${monthGroup.months}">
  <input type="checkbox" th:field="*{months[__${stat.index}__].checked}">
  <label th:text="${month.name}" th:class="${month.checked}? 'checked' : 'unchecked'"></label>

The above code will change color and apply another styling to the checked months whenever the user submits the form.

6. Conclusion

This post explained how to use different conditional statements supported by Thymeleaf. We learned how to use efficiently th:if, th:unless, th:switch, th:case tags.

The complete source can be found over on GitHub.

Thymeleaf Conditional Evaluation Explained
Tagged on:     

Satish Pandey

I am an expert Java Spring Angular developer with 10+ years of rich and varied experience in developing end-to-end Web Applications. I maintain this blog and publish articles in my free time to help the community. Email: satish@cloudtechpro.com

Leave a Reply

Notify of