> For the complete documentation index, see [llms.txt](https://guide-angular.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide-angular.wishtack.io/angular/composants/property-binding.md).

# Property Binding

L'interpolation ne suffira pas pour tout contrôler *(images, styles, etc...)*.

Mieux que le contrôle des attributs, le "property binding" nous permet de contrôler n'importe quelle propriété d'un élément du DOM en s'inspirant de la syntaxe native *(Vanilla JS)* : `button.disabled = false` ou encore `button['disabled'] = false` *(pour désactiver un bouton par exemple)*.

Ce qui donne la syntaxe suivante :

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

```markup
<img [alt]="bookName" [src]="bookPictureUrl">


<button type="button" [disabled]="!isAvailable">BUY</button>
```

{% endtab %}
{% endtabs %}

Ou en laissant le code respirer :

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

```markup
<img
        [alt]="bookName"
        [src]="bookPictureUrl">

<button
        type="button"
        [disabled]="!isAvailable">BUY</button>
```

{% endtab %}
{% endtabs %}

Les données proviennent encore du code TypeScript du composant.

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

```typescript
...

export class AppComponent {

    bookName = 'eXtreme Programming Explained';
    bookPictureUrl = 'https://robohash.org/xp?set=set4';
    isAvailable = false;

}
```

{% endtab %}
{% endtabs %}

![Exemple de "property binding" Angular](/files/-LAnJKh41Im-AN0Kz9u_)
