# Template Interpolation

Comme de nombreux langages de "templating", Angular utilise la syntaxe "double curly braces" pour l'interpolation :

{% tabs %}
{% tab title="src/app.component.ts" %}

```typescript
@Component({
    selector: 'wt-app',
    templateUrl: './app.component.html'
})
export class AppComponent {
    bookName = 'eXtreme Programming Explained';
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="src/app.component.html" %}

```markup
<div>
    <span>{{ bookName }}</span>
</div>
```

{% endtab %}
{% endtabs %}

La syntaxe d'interpolation permet d'accéder directement aux propriétés du composant associé *(un peu comme si toutes les expressions étaient préfixées par un `this.`).* En effet, l'instance de la classe `AppComponent` est le contexte utilisé par le moteur de rendu afin d'évaluer les expressions.

{% hint style="success" %}
Les expressions utilisées dans le "template interpolation" (et les "[property binding](/angular/composants/property-binding.md)") doivent rester **simples**.\
Vous pouvez utiliser des méthodes de votre composant mais elles doivent être **performantes**, **sans effet de bord** et produire des résultats **prédictibles**.
{% endhint %}

{% hint style="danger" %}
L'interpolation ne doit être utilisée que pour définir le contenu d'un élément HTML.

N'utilisez donc jamais la syntaxe d'interpolation pour contrôler les attributs d'un élément par exemple !

😱`<img src="{{ pictureUrl }}">`😱

Préférez l'utilisation du [Property Binding](/angular/composants/property-binding.md) pour les raisons suivantes :

* Les attributs d'un élément ne sont pas tous associés à des propriétés et vice versa.
* Les attributs d'un élément ne sont pas forcéments toujours synchronisés avec ses propriétés.
* Les attributs d'un élément ne sont pas toujours du même type que la propriété associée *(i.e. :* *`element.getAttribute('disabled') !== element.disabled`).*
* Certaines propriétés attendent des valeurs complexes alors que les attributs ne permettent de passer que des valeurs de type "string".
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide-angular.wishtack.io/angular/composants/template-interpolation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.