Angular: Attribute Binding
Attibute binding est le mécanisme qui permet de mettre la valeur d'une variable de la partie logique (.ts) directement dans un attribut (width,height,background...) d'une balise HTML dans la template(.html) En utlisant HTML Attribute et DOM Property
1.HTML Attribute
L'accès aux attributs des balise se fait à l'aide de attr
<p [attr.NOM_ATTRIBUT]="Variable"></p>
<!--Colspan-->
<td [attr.colspan]="variable">Texte</td>
1.DOM Property
L'accès aux attributs des balise se fait à l'aide de DOM Property
<table [border]="border"></table>
<table [class]="listeClasses"></table>
<img [class]="listeClasses" [src]="source" [width]="w" [height]="h"></table>
<iframe [src]="listeClasses" [style.]></iframe>
<button type="button" [disabled]="isDisable">Disabled Button</button>
<nav [style.DOMattribute]="expression"></nav>
<nav [style.backgroundColor]="expression"></nav>
Exemples
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
divStyle="margin:15px;border:1px solid red;padding:10px;";
tableH = 150;
tableW = "100%";
tableBorder = 5;
clspn = 1;
bgcolor="yellow";
borderColor="red";
tablebgcolor="magenta";
trStyle="border:1px solid #fff;"
userInfo={
img:"/assets/images/image1.jpg",
nom:"User Nom",
compte:"http://facebook.com/user1"
}
}
app.component.html
<div [style.backgroundColor]="bgcolor" [style]="divStyle">
<table [border]="tableBorder"
[attr.height]="tableH"
[width]="tableW"
[style.background-color]="tablebgcolor">
<tr [style]="trStyle">
<td [attr.colspan]="clspn"> 2Cols </td>
</tr>
<tr>
<td [style]="trStyle"> 1 Col </td>
<td [style]="trStyle"> 1 Col</td>
</tr>
</table>
</div>
<!-- img -->
<img [src]="userInfo.img"/>
<img bind-src="userInfo.img"/>
<img src="{{userInfo.img}}"/>
<!-- liens -->
<a [href]="userInfo.compte" [textContent]="userInfo.nom"> </a>
<a bind-href="userInfo.compte" bind-textContent="userInfo.nom"> </a>
<a href="{{userInfo.compte}}" textContent="{{userInfo.nom}}"> </a>