Home  >  Thymeleaf

Thymeleaf Conditional Expressions, for each Loop, Iteration Status and HREF Parameter Example

By Arvind Rai, November 01, 2015
On this page we will provide Thymeleaf conditional expressions, for each loop, iteration status and HREF parameter example. Thymeleaf provides th:each for iteration and th:href attribute for href value of anchor tag. We can iterate java array or any object which implements java.util.Iterable and java.util.Map. Iteration status provides index and size etc. Thymeleaf provides usual syntax for conditional expression.

Conditional Expressions

<tr th:each="writer,itrStat : ${writers}"  th:class="${itrStat.even}? 'even_css_class':'odd_css_class'" >
   <td th:text="${#strings.startsWith(writer.location,'Hi')}? #{myblog.chief}">Name</td>
</tr> 

1. The syntax of Thymeleaf expression is as usual.
Boolean Expression 1? Expression 2 : Expression 3
For true result of expression 1, the output will be the evaluation of expression 2 otherwise expression 3.
2. The syntax th:class is converted into class after template processing which is used to load CSS class.
3. If third expression is not written, it is assumed to be null.

Thymeleaf for each Loop with th:each

<tr th:each="writer : ${writers}">
    <td th:text="${writer.name}">Name</td>	
</tr> 

1. Thymeleaf provides th:each attribute to achieve for each loop.
2. We can iterate array and any object which is implementing java.util.Iterable, java.util.Map.

Iteration Status

<tr th:each="writer,itrStat : ${writers}"  th:class="${itrStat.even}? 'even_css_class':'odd_css_class'" >
    <td th:text="${writer.name}">name</td>      
    <td th:text="${itrStat.index}">0</td>
    <td th:text="${itrStat.size}">10</td>
</tr> 

1. Iteration status provides index, size of object which is being iterated.
2. It also gives even and odd number of iteration.

Thymeleaf HREF Parameter with th:href="@{...}

<a href="test.html" th:href="@{/profile/writer(id=${writer.id})}">Profile</a>
 

1. Thymeleaf uses th:href attribute to process href value at run time.
2. It uses th:href="@{...} syntax.

HTML file


myblog.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <head>
    <title th:text="#{myblog.title}">Blog Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <table>
      <tr th:each="writer : ${writers}">
	    <td th:text="${writer.name}">Name</td>
		<td th:text="${writer.location}">Location</td>
	    <td> <a href="test.html" th:href="@{/profile/writer(id=${writer.id})}">Profile</a> </td>		
      </tr>
    </table>
    
    <table>
      <tr th:each="writer,itrStat : ${writers}" th:class="${itrStat.even}? 'even_css_class':'odd_css_class'">
         <td th:text="${writer.name}">name</td>      
         <td th:text="${itrStat.index}">0</td>
         <td th:text="${itrStat.size}">10</td>
         <td th:text="${#strings.startsWith(writer.location,'Hi')}? #{myblog.chief}">Name</td>
      </tr>
    </table>
  </body>
</html>  

Property File


myblog_en.properties
myblog.title= Thymeleaf Blog
myblog.chief =chief 

Output

Run the demo using URL http://localhost:8080/concretepage-1/myblog
Find the output as view source.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Thymeleaf Blog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <table>
      <tr>
	    <td>Ram</td>
		<td>Ayodhya</td>
	    <td> <a href="/concretepage-1/profile/writer?id=1">Profile</a> </td>		
      </tr>
      <tr>
	    <td>Krishna</td>
		<td>Mathura</td>
	    <td> <a href="/concretepage-1/profile/writer?id=2">Profile</a> </td>		
      </tr>
      <tr>
	    <td>Shankar</td>
		<td>Himalaya</td>
	    <td> <a href="/concretepage-1/profile/writer?id=3">Profile</a> </td>		
      </tr>
    </table>
    
    <table>
      <tr class="even_css_class">
         <td>Ram</td>      
         <td>0</td>
         <td>3</td>
         <td></td>
      </tr>
      <tr class="odd_css_class">
         <td>Krishna</td>      
         <td>1</td>
         <td>3</td>
         <td></td>
      </tr>
      <tr class="even_css_class">
         <td>Shankar</td>      
         <td>2</td>
         <td>3</td>
         <td>chief</td>
      </tr>
    </table>
  </body>
</html>  

Download Complete Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS


©2018 concretepage.com | Privacy Policy | Contact Us