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" %}

<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" %}

<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" %}

...

export class AppComponent {

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

}

{% endtab %} {% endtabs %}