> Markdown version of [Using sub-template from PolymerTemplate](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-subtemplate). Section index: [llms.txt](https://vaadin.com/docs/v10/flow/llms.txt)

# Using sub-template from PolymerTemplate

You can configure Java instances to be created for custom elements inside your HTML template file with the `@Uses` annotation.

Here is an example of parent HTML template file:

```html
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/com/example/ChildTemplate.html">

<dom-module id="parent-template">
    <template>
        <div>Parent Template</div>
        <div>[[name]]</div>
        <child-template>
    </template>
    <script>
        class ParentTemplate extends Polymer.Element {
            static get is() { return 'parent-template' }
        }
        customElements.define(ParentTemplate.is, ParentTemplate);
    </script>
</dom-module>
```

The Java counterpart defines that `ChildTemplate` should be instantiated for any template element with a matching tag name (i.e. `child-template`).

```java
@Tag("parent-template")
@HtmlImport("/com/example/ParentTemplate.html")
@Uses(ChildTemplate.class)
public class ParentTemplate extends PolymerTemplate<Model> {
}

public interface Model extends TemplateModel {
    void setName(String name);

    String getName();
}
```

The HTML template uses a `child-template` element, which is a custom element defined in `ChildTemplate.html`. Since the client-side implementation of `child-template` depends on a click handler defined from server-side Java, an instance of `ChildTemplate` must be created on the server. By using `@Uses(ChildTemplate.class)`, this instance will automatically be created and hooked up with the `<child-template>` element in the parent template based on the `@Tag("child-template")` annotation value.

> **Note:** Server-side instances are also created when using `@Id` to connect elements together. You don’t need `@Uses` for elements that are already covered by `@Id`, and vice versa.

Here is the child template Java code:

```java
@Tag("child-template")
@HtmlImport("/com/example/ChildTemplate.html")
public  class ChildTemplate extends PolymerTemplate<TemplateModel> {

    @EventHandler
    private void handleClick() {
        System.out.println("Click on Button in the child template");
    }
}
```

And it’s the HTML template counterpart:

```html
<link rel="import" href="/bower_components/polymer/polymer-element.html">

<dom-module id="child-template">
    <template>
        <button on-click="handleClick">Child Template</button>
    </template>
    <script>
        class ChildTemplate extends Polymer.Element {
            static get is() { return 'child-template' }
        }
        customElements.define(ChildTemplate.is, ChildTemplate);
    </script>
</dom-module>
```

This template delegates a click handler to the server side and the method `handleClick` will be called on the `ChildTemplate` instance (not `ParentTemplate` instance).

> **Note:** You can detect whether a component is part of a Template by using the `isTemplateMapped` method. See the [Integrating components in a PolymerTemplate](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-component-integration.md) tutorial for more details.