In this tutorial, we will learn how to use Thymeleaf Fragment Expression in Thymeleaf HTML templates with an example.

Check out the complete Thymeleaf tutorials and examples at Thymeleaf Tutorial

Fragment expressions are an easy way to represent fragments of markup and move them around templates.

Syntax:

~{fragment name}

There are three basic ways to include content from a fragment:

th:insert – inserts content inside the tag
th:replace – replaces the current tag with the tag defining the fragment
th:include – this is deprecated but it may still appear in a legacy code // don't use it

Fragment Expressions Example

Let's understand Fragment expressions with an example.

Let's create a Spring boot project using the spring initializr and add Spring Web and Thymeleaf dependencies:

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

User Model Class

Next, let's create a User model class with the following content into it:

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;
    }
}

Create header and footer Fragments

Let's first create a new folder called the common in /resources/templates folder. Within the common folder, let's create header.html and footer.html Thymeleaf HTML files.

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>

Note that we are using th:fragment Thymeleaf attribute to define a fragment.

Spring MVC Controller - UserController

Let's create a UserController and add the handler method to return the 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;

@Controller
public class UserController {

    // handler method to handle fragment expression
    @GetMapping("fragment-expression")
    public String fragmentExpression(){
        return "fragment-expression";
    }
}

Thymeleaf Template: fragment-expression.html

Here is the Thymeleaf template that demonstrates the usage of Fragment expressions:

<!DOCTYPE html>
<html lang="en"
  xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>Fragment Expression</title>
</head>
<body>
<h1> Fragment Expressions Demo:</h1>
<div th:replace="~{common/header :: header}"></div>
<div>
    <h1>Page Body</h1>
</div>
<div th:replace="~{common/footer :: footer}"></div>
</body>
</html>

Note that we are using th:replace attribute to insert header and footer fragments.

Demo

Run the Spring boot application and hit the below link in the browser:

http://localhost:8080/fragment-expression

Here is the output:

Related Thymeleaf Examples

Java Guides

Search This Blog

Thymeleaf Fragment Expression