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
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
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
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