🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

In this tutorial, we will learn a few important Thymeleaf attributes with examples.

We will cover:

1. Thymeleaf th:text attribute

2. Thymeleaf th:each attribute

3. Thymeleaf th:if and th:unless attribute

4. Thymeleaf th:switch and th:case attribute

5. Thymeleaf th:fragment attribute

1. Thymeleaf th:text attribute

The th:text attribute is responsible for displaying text that is evaluated from the expression inside it.

For example: To display a message:

<h2 th:text="${message}">Hello Good Morning!.</h2>

The th:text attribute evaluates its value expression and sets the result as the body of the host tag, effectively replacing the “Hello Good Morning!” text we see in the code.

Thymeleaf th:text attribute example

The below example demonstrates the usage of th:text attribute to evaluate variable expressions and result as the body of the <strong> tag:

    <p> Name: <strong th:text="${user.name}"></strong></p>
    <p> Email: <strong th:text="${user.email}"></strong></p>
    <p> Role: <strong th:text="${user.role}"></strong></p>
    <p> Gender: <strong th:text="${user.gender}"></strong></p>

Read more about th:text attribute at Thymeleaf th:text Attribute

2. Thymeleaf th:each attribute

In Thymeleaf, iteration or looping is achieved by using the th:each attribute. One of the interesting things about this attribute is that it will accept and iterate over some different data types, such as List, Set, Map, Array

Thymeleaf th:each attribute example

Consider we have Employee Model class:

package net.javaguides.springboot;

public class Employee {
    private String firstName;
    private String lastName;
    private String email;

    public Employee(String firstName, String lastName, String email) {
        super();
        this.firstName = firstName;
        this.lastName = lastName;
        this.email = email;
    }
    // getters/setters   
}

Spring MVC controller that returns Model and View:

@Controller
public class EmployeeController {

    @GetMapping("/iteration")
    public String iteration(Model model) {
        List < Employee > employees = new ArrayList < > ();
        employees.add(new Employee("Ramesh", "Fadatare", "ramesh@gmail.com"));
        employees.add(new Employee("John", "Cena", "john@gmail.com"));
        employees.add(new Employee("Tom", "Cruise", "tom@gmail.com"));
        employees.add(new Employee("Tony", "Stark", "tony@gmail.com"));
        model.addAttribute("employees", employees);
        return "iteration";
    }
}

Here is the Thymeleaf template that demonstrates the usage of th:each attribute. We are using th:each to iterate through the list of employees:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="ISO-8859-1">
    <title>Add Bootstrap CSS Demo</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <div class="row">
            <h1>Employees</h1>

            <table class="table">
                <thead>
                    <tr>
                        <th>Employee First Name</th>
                        <th>Employee Last Name</th>
                        <th>Employee Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="employee : ${employees}">
                        <td th:text="${employee.firstName}"></td>
                        <td th:text="${employee.lastName}"></td>
                        <td th:text="${employee.email}"></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</body>

</html>

3. Thymeleaf th:if and th:unless attribute

In some situations, you want a certain snippet of the Thymeleaf template to appear in the result if a certain condition is evaluated as true. To do this you can use the attribute th:if.

Thymeleaf th:if and th:unless attribute example

            <table class="table">
                <thead>
                    <tr>
                        <th>User Name</th>
                        <th>User Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="user : ${users}">
                        <td th:text="${user.userName}"></td>
                        <td th:text="${user.email}"></td>
                        <td><a class="btn btn-primary" th:if="${user.role} == 'ADMIN'">Update</a>
                            <a class="btn btn-danger" th:if="${user.role} == 'ADMIN'">Delete</a>
                            <a class="btn btn-primary" th:unless="${user.role} == 'ADMIN'">View</a>
                        </td>
                    </tr>
                </tbody>
            </table>

In the above Thymeleaf template, the user with the "Admin" role can only see the Update and Delete buttons. The User who doesn't have an "Admin" role can see only the View button.

Check out the complete example at Thymeleaf Template If, Unless, and Switch Case Example

4. Thymeleaf th:switch and th:case attribute

In Java, you are familiar with the switch/case structure. Thymeleaf also has a similar structure that is th:switch/th:case.

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

Thymeleaf th:switch and th:case attribute example

    <div class="container">
        <div class="row">
            <h1>Thymeleaf swith case demo</h1>
            <h4 th:utext="${user.userName}"></h4>
            <div th:switch="${user.role}">
                <p th:case="'ADMIN'">User is an administrator</p>
                <p th:case="'MANAGER'">User is a manager</p>
                <p th:case="'GUEST'">User is a guest</p>
                <!-- * for default case -->
                <p th:case="*">User is some other thing</p>
            </div>
        </div>
    </div>

If the User role is "Admin" then "User is an administrator" text prints on the web page.

The th:case = "*" is the default case of the th:swith/th:case structure. If all the above cases are evaluated as false the code of default case will be "rendered".

Check out the complete example at Thymeleaf Template If, Unless, and Switch Case Example

5. Thymeleaf th:fragment attribute

The th:fragment Thymeleaf attribute is used to define a fragment.

commom/header.html:

<!DOCTYPE html>
<html lang="en"
    xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>Header</title>
</head>
<body>
<div th:fragment="header">
    <h1> Header Part</h1>
    <hr />
</div>
</body>
</html>

common/footer.html:

<!DOCTYPE html>
<html lang="en"
  xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>Footer</title>
</head>
<body>
<div th:fragment="footer">
    <hr />
    <h1>Footer Part</h1>
</div>
</body>
</html>

Check out the complete example at Thymeleaf Fragment Expression

Related Thymeleaf Examples

Thymeleaf Standard Expressions
Thymeleaf th:text Attribute
Thymeleaf Variable Expression
Thymeleaf Selection Expression
Thymeleaf Message Expression
Thymeleaf Link Expression
Thymeleaf Fragment Expression
Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
Thymeleaf Example with Spring Boot
Spring Boot 3 Thymeleaf Example
How to Add CSS and JS to Thymeleaf
Add Bootstrap CSS to Thymeleaf
How to handle null values in Thymeleaf?
How to Loop a List by Index in Thymeleaf
Thymeleaf Array Example - Array Index, Array Iteration
Thymeleaf Enums Example
Thymeleaf If Else Condition Example
Thymeleaf Switch Case Example

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog

Thymeleaf Attributes

1. Thymeleaf th:text attribute

Thymeleaf th:text attribute example

2. Thymeleaf th:each attribute

Thymeleaf th:each attribute example

3. Thymeleaf th:if and th:unless attribute

Thymeleaf th:if and th:unless attribute example

4. Thymeleaf th:switch and th:case attribute

Thymeleaf th:switch and th:case attribute example

5. Thymeleaf th:fragment attribute

Related Thymeleaf Examples

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

ChatGPT + Generative AI + Prompt Engineering for Beginners

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

Building Real-Time REST APIs with Spring Boot - Blog App

Building Microservices with Spring Boot and Spring Cloud

Java Full-Stack Developer Course with Spring Boot and React JS

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

Testing Spring Boot Application with JUnit and Mockito

Spring Boot Thymeleaf Real-Time Web Application - Blog App

Master Spring Data JPA with Hibernate

Spring Boot + Apache Kafka Course - The Practical Guide

Java Testing: Mastering JUnit 5 Framework

Reactive Programming in Java: Spring WebFlux and Testing

Spring Boot + RabbitMQ Course - The Practical Guide

Functional Programming in Java (Includes Java Collections)

ChatGPT for Java Developers: Boost Your Productivity with AI

Comments

Post a Comment

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel

Thymeleaf Attributes

1. Thymeleaf th:text attribute

Thymeleaf th:text attribute example

2. Thymeleaf th:each attribute

Thymeleaf th:each attribute example

3. Thymeleaf th:if and th:unless attribute

Thymeleaf th:if and th:unless attribute example

4. Thymeleaf th:switch and th:case attribute

Thymeleaf th:switch and th:case attribute example

5. Thymeleaf th:fragment attribute

Related Thymeleaf Examples

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

ChatGPT + Generative AI + Prompt Engineering for Beginners

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

Building Real-Time REST APIs with Spring Boot - Blog App

Building Microservices with Spring Boot and Spring Cloud

Java Full-Stack Developer Course with Spring Boot and React JS

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

Testing Spring Boot Application with JUnit and Mockito

Spring Boot Thymeleaf Real-Time Web Application - Blog App

Master Spring Data JPA with Hibernate

Spring Boot + Apache Kafka Course - The Practical Guide

Java Testing: Mastering JUnit 5 Framework

Reactive Programming in Java: Spring WebFlux and Testing

Spring Boot + RabbitMQ Course - The Practical Guide

Functional Programming in Java (Includes Java Collections)

ChatGPT for Java Developers: Boost Your Productivity with AI

Comments

Post a Comment

Spring Boot 3 Paid Course Published for Free on my Java Guides YouTube Channel

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel