Thymeleaf If Else Condition Example

Author:
In this example, we will discuss how to perform the if-else condition in Thymeleaf with an example.
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html

Thymeleaf th:if and th:unless Attributes

The th:if and th:unless attributes allow us to render an HTML element depending on a provided condition.
Syntax:
<div th:if="${condition}">
  <p>TRUE</p>
</div>
<div th:unless="${condition}">
  <p>FALSE</p>
</div>

Thymeleaf th:if and th:unless Attributes example using Spring boot

In this example, we will demonstrate the usage of th:if and th:unless attributes.
Let's add the below dependency to integrate Thymeleaf with Spring boot:
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Let's create a User model class:
package net.javaguides.thymeleaf.model;

public class User {
    private String name;
    private String email;
    private String role;
    private String gender;

    public User(String name, String email, String role, String gender) {
        this.name = name;
        this.email = email;
        this.role = role;
        this.gender = gender;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }
}
Now, let's create a Spring MVC controller with a handler method to return Thymeleaf template like:
package net.javaguides.thymeleaf.controller;

import net.javaguides.thymeleaf.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class UserController {

    // if-unless condition
    @GetMapping("if-unless")
    public String ifUnless(Model model){
        User ramesh = new User("ramesh","ramesh@gmail.com", "ADMIN", "M");
        User admin = new User("admin","admin@gmail.com", "ADMIN", "M");
        User meena = new User("meena","meena@gmail.com", "USER", "F");
        List<User> users = new ArrayList<>();
        users.add(ramesh);
        users.add(admin);
        users.add(meena);
        model.addAttribute("users", users);
        return "if-unless";
    }
}
Here is the Thymeleaf template to demonstrate the use of an if-else statement:

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>User Management</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Gender</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${users}">
        <td th:text="${user.name}"></td>
        <td th:text="${user.email}"></td>
        <td th:text="${user.role}"></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>
</body>
</html>
If the User role is 'ADMIN' then the Update and Delete buttons will be rendered unless the View button will be rendered.

Demo:


Using Switch Case Statement - th:switch Attribute

To achieve similar to if-else condition in Thymeleaf , we can use th:switch attribute. 
This command is equivalent to a switch structure in Java. The following example shows how to use it:
<div th:switch="${condition}">
  <p th:case="${true}">TRUE</p>
  <p th:case="*">FALSE</p>
</div>
Thymeleaf at the first step will evaluate ${condition} expression and if the value is true it will print p tag with TRUE text. When an evaluated value is different than the true the Thymeleaf engine will generate p element with FALSE. 
The default option for th:switch is specified as th:case="*". This simple switch with default handled will work as if-else command.

Thyemelaf th:switch attribute example

Now, let's create a Spring MVC controller with a handler method to return Thymeleaf template like:
package net.javaguides.thymeleaf.controller;

import net.javaguides.thymeleaf.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

@Controller
public class UserController {

    @GetMapping("switch-case")
    public String user(Model model){
        User user = new User("ramesh","ramesh@gmail.com", "ADMIN", "M");
        model.addAttribute("user", user);
        return "switch-case";
    }
}
Here is the Thymeleaf template that demonstrates the use of a switch case statement:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="ISO-8859-1">
    <title>Thymeleaf switch case Demo</title>
</head>

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

</div>
</body>

</html>
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 then the default case will be "rendered".

Demo:

Comments

Post a Comment

Leave Comment