Angular: Data Binding

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.

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>

-(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 { }

Angular

By Hakiki