Angular: Data Binding
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.
1.One way data binding =>{{}}
la communication de données de la logique vers la template ou vice versa
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>
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
-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 inputimport { 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 { }