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']
})
exportclass AppComponent {
}
Exemple 1: .ts
import { Component } from'@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
exportclass 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']
})
exportclass 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
Exemple
app.component.ts
// Importation du décorateur Component depuis le module core d'Angular
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Déclaration d'une propriété message avec une valeur par défaut
message = 'Bonjour depuis Angular!';
// Déclaration d'une propriété imageURL avec une URL d'image
imageURL = 'https://example.com/image.jpg';
// Déclaration d'une propriété inputText liée à la valeur d'un champ de saisie
inputText = '';
// Déclaration d'une méthode handleClick qui sera appelée lors du clic sur le bouton
handleClick() {
// Modification de la propriété message lors du clic sur le bouton
this.message = 'Bouton cliqué!';
}
}
app.component.html
<!-- Balise div qui contient le contenu du composant -->
<div>
<!-- Affichage du contenu de la propriété message dans le modèle -->
<h2>{{ message }}</h2>
<!-- Utilisation de l'interpolation pour afficher la valeur de la propriété message -->
<p>Message: {{ message }}</p>
<!-- Utilisation de la liaison de propriété pour définir la valeur de l'attribut src de l'image -->
<img [src]="imageURL" alt="Image">
<!-- Utilisation de la liaison bidirectionnelle avec ngModel pour synchroniser une variable avec un champ de saisie -->
<input [(ngModel)]="inputText" placeholder="Saisissez du texte">
<!-- Utilisation de l'événement (click) pour déclencher la méthode handleClick lors du clic sur le bouton -->
<button (click)="handleClick()">Cliquez-moi</button>
</div>
Exemple 2
app.component.ts
// Importation du décorateur Component depuis le module core d'Angular
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Propriété pour stocker le nom de l'utilisateur
username = 'Utilisateur';
// Méthode pour mettre à jour le nom de l'utilisateur
updateUsername(newName: string): void {
this.username = newName;
}
}
app.component.html
<div>
<h2>Bienvenue, {{ username }}!</h2>
<!-- Utilisation de l'interpolation pour afficher la valeur de la propriété username -->
<p>Votre nom d'utilisateur est : {{ username }}</p>
<!-- Utilisation de la liaison de propriété pour définir la valeur de l'attribut src de l'image -->
<img [src]="getUserImageURL()" alt="Image de l'utilisateur">
<!-- Utilisation de la liaison bidirectionnelle avec ngModel pour mettre à jour le nom de l'utilisateur via un champ de saisie -->
<input [(ngModel)]="username" placeholder="Nouveau nom d'utilisateur">
<!-- Utilisation de l'événement (click) pour déclencher la méthode updateUsername lors du clic sur le bouton -->
<button (click)="updateUsername('Nouvel utilisateur')">Changer le nom</button>
</div>
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']
})
exportclass AppComponent {
name: string = '';
}
Exemple 1: app.component.html
<router-outlet>
<!-- binding template vers la logique avec l'attribut : [(ngModel)]-->
<inputtype="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
