| folder | Projet: angularApp |
data binding est le mechanisme qui permet de lier les variables
de la partie logique (.ts) de la component à la template(.html)
Donc data binding joue le roule de l'intermedaire de communication
entre la logique et la template de chaque component.
Le Data Binding est un concept clé dans le framework Angular. Il permet de lier dynamiquement les données d'un composant à l'interface utilisateur de l'application. Le Data Binding permet de créer des applications interactives en temps réel.
Il existe trois types de Data Binding dans Angular:
Interpolation : Il s'agit de la façon la plus simple de lier des données à l'interface utilisateur. L'interpolation utilise la syntaxe de double accolade {{ }} pour lier une propriété de l'objet du composant à un élément HTML. Par exemple, pour afficher le nom d'un utilisateur dans un élément HTML, on peut utiliser l'interpolation de la manière suivante :
<h1>Bienvenue {{ user.name }}!</h1>
Property Binding : Le Property Binding est utilisé pour lier une propriété d'un élément HTML à une propriété d'un objet du composant. Cette liaison est établie à l'aide de la syntaxe crochets [ ] autour de la propriété de l'élément HTML. Par exemple, pour lier la propriété "src" d'un élément "img" à une propriété "imageUrl" de l'objet du composant, on peut utiliser le Property Binding de la manière suivante :
<img [src]="imageUrl" />
Event Binding : L'Event Binding permet de lier un événement déclenché par un élément HTML à une méthode définie dans le composant. Cette liaison est établie à l'aide de la syntaxe parenthèses ( ) autour de l'événement. Par exemple, pour lier un clic sur un bouton à une méthode "onClick" du composant, on peut utiliser l'Event Binding de la manière suivante :
<button (click)="onClick()">Cliquer ici</button>
1.One way data binding =>{{}}
la communication de données de la logique vers la template
Afin de tester on va travailler dans la component principale app.component.html et app.component.ts
Veuillez supprimer le contenu de la la component principale app.component.html
app.component.html
<router-outlet></router-outlet>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
Exemple 1: .ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//déclaration des attributs
nom: string = "nom 1";
prenom: string = "prenom 1";
age: number = 23;
}
Exemple 1: .html
Nom:{{nom}} <br/>
Prénom:{{prenom}} <br/>
Age:{{age}} <br/>
Exemple 1: Résultat
Nom:nom 1
Prénom:prenom 1
Age:23
Exemple 2:Ts Ajouter des événements
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//declaration d'un attribut x de la classe
x: number = 0;
//une méthode
maFonction() {
this.x += 1;
}
}
Exemple 2:View Ajouter des événements
<router-outlet>
<button (click)="maFonction()">cliquer</button> {{ x }}
</router-outlet>
-(click):lorsqu'on clique sur le bouton la méthode f de la partie
logique sera appelée
-{{ x }} :est l'interpolation de la propriété x de la partie logique
Conclusion:
la partie logique envoie les données à la template; car lorsqu'on
clique sur le bouton la methode maFonction() incrémente la valeur de x
puis la logique reEnvoye la valeur à la partie template
2.Two way data binding
la communication de données entre la logique et la template est bidirectionnelle
-de la logique vers templates
-de la templates vers la logique
a.logique vers template déja vue il suffait d'afficher la valeur
d'une propriété en utilisant {{ }}
b.template vers la vue :on aura besoin d'utiliser un formulaire
lorsque l'utilisateur a saisi des données on va envoyer ces données
à la partie logique pour les traitées
Exemple 1: app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name: string = '';
}
Exemple 1: app.component.html
<router-outlet>
<!-- binding template vers la logique avec l'attribut : [(ngModel)]-->
<input type="text" [(ngModel)]="name"><br>
<!-- binding logique vers template -->
{{ name }}
</router-outlet>
Exemple 1: app.module.ts
on doit importer le module FormsModule parceque cette
exemple contient des input
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Exercice:Créer le formulaire suivant:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//déclaration des attributs
client={
nom:'',
ville:''
}
listeClient:any=[];
addClient()
{
if(this.client.nom!='' && this.client.ville!='')
{
this.listeClient.push({nom:this.client.nom,ville:this.client.ville})
console.log(this.listeClient)
}
}
}
app.component.html
<router-outlet>
<fieldset>
<legend>Add new Customer</legend>
<table>
<tr>
<td>Nom</td>
<td><input type="text" [(ngModel)]="client.nom"></td>
</tr>
<tr>
<td>Ville</td>
<td><select [(ngModel)]="client.ville">
<option>Casa</option>
<option>Rabat</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" (click)="addClient()" value="valider"></td>
</tr>
</table>
</fieldset>
<table style="width:100%">
<thead style="background-color: #ddd;" >
<th>Id</th>
<th>Nom</th>
<th>Ville</th>
</thead>
<tbody>
<tr *ngFor="let c of listeClient; let i = index"
style="border:1px solid #ddd;">
<td style="border:1px solid #ddd;">{{i+1}}</td>
<td style="border:1px solid #ddd;">{{c.nom}}</td>
<td style="border:1px solid #ddd;">{{c.ville}}</td>
</tr>
</tbody>
</table>
</router-outlet>