Thymeleaf conditionals: "if" and "unless"

By Arvind Rai, April 21, 2023

On this page, we will learn using Thymeleaf if and unless conditions in our Java application.
1. Thymeleaf provides th:if attribute that is useful when we need a fragment of our template to only appear in the result if a certain condition is met.
2. Thymeleaf provides th:unless attribute that is the inverse attribute of th:if attribute.
3. The th:if condition is passed for not null, non-zero number, non-zero character and for any string except "0", "false", "off" and "no".
4. The th:if condition does not pass for the values "null", "0", "false", "off" and "no".
5. Use OGNL expression such as ${ }, #{} to get values from context variables and property file.

On this page we will discuss th:if and th:unless attributes examples in detail.

1. With Boolean
2. With Number
3. With Character
4. With String
5. With Null Value
6. Using "unless"
7. Fetching value from Property file
8. With Iteration
9. Reference
10. Download Source Code

1. With Boolean

The th:if condition is passed for Boolean value true.

<div th:if="true">
   For true
</div>
<div th:if="false">
   For false
</div>

Find the generated HTML.

<div>
   For true
</div>

We can see that HTML is not generated for false value.

2. With Number

The th:if condition is passed for non-zero number such as 1, 2, -1, 2 but failed for 0 number.

<div th:if="15">
   For 15
</div>
<div th:if="-5">
   For -5
</div>
<div th:if="0">
   For 0
</div>

Find the generated HTML.

<div>
   For 15
</div>
<div>
   For -5
</div>

We can see that The th:if condition is failed for 0 number and HTML is not generated.

3. With Character

The th:if condition is passed if value is a character and is non-zero.

<div th:if="'E'">
   For Character E
</div>	
<div th:if="'F'">
   For Character F
</div>

Find the generated HTML.

<div>
   For Character E
</div>	
<div>
   For Character F
</div>

4. With String

The th:if condition is passed for any string value except "false", "off" or "no".

<div th:if="Mohit">
   For Any String
</div>	
<div th:if="false">
   For String "false"
</div>
<div th:if="off">
   For String "off"
</div>
<div th:if="no">
   For String "no"
</div>

Find the generated HTML.

<div>
   For Any String
</div>

We can see that for string values "false", "off" or "no", the th:if is not generating HTML code but for other string values th:if condition is passed and HTML code is generated.

5. With Null Value

The th:if condition is not passed for null value. The below Thymeleaf code will not generate any HTML code.

<div th:if="null">
   For Null
</div>

Now find the code for context variable.

String city = null;
ctx.setVariable("myCity", city);

We can see that the variable myCity is null.

<div th:if="${myCity}">
   For My City
</div>
<div th:if="${not myCity}">
   For My City (Not)
</div>

Find the generated HTML code.

<div>
   For My City (Not)
</div>

6. Using "unless"

The th:unless is the inverse attribute of th:if. The th:unless will result same when using th:if with not inside OGNL expression.

<div th:each="writer : ${writers}">
	<p th:if="${not writer.isActive()}"  th:text="${writer.getName()}">Name</p>
</div>

The above code can be written with th:unless as following.

<div th:each="writer : ${writers}">
	<p th:unless="${writer.isActive()}"  th:text="${writer.getName()}">Name</p>
</div>

7. Fetching value from Property file

Find the code to use th:if and th:unless from property file.

<div th:if="#{myblog.isPublished}">
  Blog Published
</div>
<div th:unless="#{myblog.isPublished}">
  Blog Not Published 
</div>

For the myblog.isPublished= true, the following HTML code will be generated.

<div>
  Blog Published
</div>

8. With Iteration

Find the th:if and th:unless conditions example with Thymeleaf iteration.

<div th:each="dir : ${directions}">
	<p th:if="${dir.getValue().equalsIgnoreCase('E')}" th:text="East">E</p>
	<p th:if="${dir.getValue().equalsIgnoreCase('W')}" th:text="West">W</p>
	<p th:if="${dir.getValue().equalsIgnoreCase('N')}" th:text="North">N</p>
	<p th:if="${dir.getValue().equalsIgnoreCase('S')}" th:text="South">S</p>
</div>
<table>
	<tr th:each="writer,itrStat : ${writers}" th:class="${itrStat.even}? 'even_css_class':'odd_css_class'">
		<td th:text="${writer.getName()}">Name</td>
		<td th:if="${writer.isActive()}">Active</td>
		<td th:unless="${writer.isActive()}">Disabled</td>
		<td>
		   <a href="profile.html" th:href="@{/writer/profile(id=${writer.id})}" 
				th:if="${writer.isActive()}">Profile</a>
		</td>
	</tr>
</table>