Thymeleaf Fragment Expression

Author:

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: 
  1. th:insert – inserts content inside the tag 
  2. th:replace – replaces the current tag with the tag defining the fragment 
  3. 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:

Here is the output:

Related Thymeleaf Examples

  1. Thymeleaf Standard Expressions
  2. Thymeleaf th:text Attribute
  3. Thymeleaf Variable Expression
  4. Thymeleaf Selection Expression
  5. Thymeleaf Message Expression
  6. Thymeleaf Link Expression
  7. Thymeleaf Fragment Expression
  8. Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
  9. Thymeleaf Example with Spring Boot
  10. Spring Boot 3 Thymeleaf Example
  11. How to Add CSS and JS to Thymeleaf
  12. Add Bootstrap CSS to Thymeleaf
  13. How to handle null values in Thymeleaf?
  14. How to Loop a List by Index in Thymeleaf
  15. Thymeleaf Array Example - Array Index, Array Iteration
  16. Thymeleaf Enums Example
  17. Thymeleaf If Else Condition Example
  18. Thymeleaf Switch Case Example

Comments

Post a Comment

Leave Comment