> For the complete documentation index, see [llms.txt](https://jsverse.gitbook.io/transloco/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jsverse.gitbook.io/transloco/core-concepts/translation-in-the-template.md).
# Translation in the Template
### Structural Directive
The **structural directive** is the recommended approach as it is DRY (Don't Repeat Yourself) and efficient. It creates a single subscription per template, making it an optimal choice for translations:
```html
{{ t('title') }}
```
The `t` function is memoized, meaning it caches translation results. If the same key is requested again, it will return the cached value for better performance.
You can also pass a **params object** as the second argument:
{% code title="home.component.html" %}
```html
{{ t('name', { name: 'Transloco' }) }}
```
{% endcode %}
And here is how that translation looks like:
{% code title="en.json" %}
```json
{
"name": "My name is {{name}}"
}
```
{% endcode %}
To translate based on a **different** language, specify the `lang` input:
<ng-container *transloco="let t; lang: 'es'">
<p>{{ t('title') }}</p>
</ng-container>
This will use the Spanish translation file to translate the keys.
**Using the `prefix` Input**
{% hint style="warning" %}
The `read` input was renamed to `prefix` starting with v7.1.0. The old `read` input is now deprecated and will be removed in v9.
{% endhint %}
You can use the `prefix` input in the structural directive to get translations for nested properties (including deeply nested ones). This eliminates the need to repeatedly specify the same parent key in your translations.
Let's look at the following JSON file:
{% code title="en.json" %}
```json
{
"foo": "Foo",
"bar": "Bar",
"dashboard": {
"title": "Dashboard Title",
"desc": "Dashboard Description"
}
}
```
{% endcode %}
And here's how we use the `prefix` in the template:
<ng-container *transloco="let t; prefix: 'dashboard'">
<p>{{ t('title') }}</p>
<p>{{ t('desc') }}</p>
</ng-container>
When you pass a prefix, Transloco treats the keys as if you had written them like this:
```html
{{ t('dashboard.title') }}
{{ t('dashboard.desc') }}
```
### Pipe
Another option is using the **transloco pipe**:
```html
{{ 'home' | transloco }}
```
You can use it with **params**:
```html
{{ 'alert' | transloco: { value: dynamic } }}
```
It can also be used with **bindings** or **inputs**:
```html
Attribute
Property
```
To translate using a **different language**:
```html
{{ 'alert' | transloco:params:'es' }}
```
### Attribute Directive
Finally, you can use the **transloco attribute directive**:
```html
```
Use it with **params**:
```html
```
To specify a **different language**:
```html
```