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 :

src/app.component.html

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


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

Ou en laissant le code respirer :

src/app.component.html

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

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

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

src/app.component.ts

...

export class AppComponent {

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

}

Exemple de "property binding" Angular