menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular: Attribute Binding

folder Projet: angularApp
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>