Thymeleaf is a popular server-side template engine for web applications in Java. It allows you to create dynamic web pages by integrating your data and rendering it in HTML templates. One of the common things you'll do in Thymeleaf is conditionally displaying parts of your template based on certain conditions. Let's go over how to use if conditions in Thymeleaf in a simple and understandable way.
Basic If Condition
In Thymeleaf, you can use the th:if attribute to conditionally render elements. If the condition is true, the element is rendered; if it's false, the element is not included in the rendered HTML.
Here's an example:
<div th:if="${user.loggedIn}"> Welcome, <span th:text="${user.name}">User</span>! </div>In this example:
The th:if="${user.loggedIn}" part checks if the loggedIn property of the user object is true.
If user.loggedIn is true, the entire <div> element is included in the output.
If user.loggedIn is false, the <div> element is not rendered at all.
Else Condition
Thymeleaf doesn't have a direct else attribute, but you can achieve the same effect using th:if on different elements.
Here's how you can handle both the true and false cases:
<div th:if="${user.loggedIn}"> Welcome, <span th:text="${user.name}">User</span>! </div> <div th:if="${!user.loggedIn}"> Please log in to continue. </div>In this example:
The first <div> is rendered if user.loggedIn is true.
The second <div> is rendered if user.loggedIn is false (using the negation ! operator).
Complex Conditions
You can use more complex conditions by combining multiple checks or using logical operators.
For example:
<div th:if="${user.loggedIn} and ${user.role == 'admin'}"> Welcome, Admin <span th:text="${user.name}">User</span>! </div> <div th:if="${user.loggedIn} and ${user.role != 'admin'}"> Welcome, <span th:text="${user.name}">User</span>! </div> <div th:if="${!user.loggedIn}"> Please log in to continue. </div>In this example:
The first <div> is rendered if the user is logged in and their role is 'admin'.
The second <div> is rendered if the user is logged in but their role is not 'admin'.
The third <div> is rendered if the user is not logged in.
Using Switch Statements
For more complex scenarios, Thymeleaf also supports a switch-like structure using th:switch and th:case.
Here’s an example:
<div th:switch="${user.role}"> <p th:case="'admin'">Welcome, Admin!</p> <p th:case="'user'">Welcome, User!</p> <p th:case="*">Welcome, Guest!</p> </div>In this example:
The th:switch="${user.role}" part evaluates the user.role value.
Depending on the value of user.role, the corresponding <p> element is rendered.
The th:case="*" is a default case that matches anything not covered by the other cases.
Summary
Thymeleaf makes it easy to add conditional logic to your templates using th:if and related attributes. This allows you to control which parts of your HTML are rendered based on the state of your data, making your web pages dynamic and interactive. Whether you need simple conditions or more complex logic, Thymeleaf provides the tools to get the job done.
Comments