Liaison de données dans Angular

1. Interpolation de chaînes (String Interpolation)
2. Reliure de propriété (Property Binding,)
3. Liaison d’événement (Event Binding,)
4. Liaison de données bidirectionnelle (Two Way Data Binding)

• Nous avons déjà créé un projet Angular à l’aide d’Angular CLI.Pour voir comment créer un projet Angular. Cliquez ici
• Ici, nous utilisons le même projet pour cet exemple.
• Ouvrez le fichier app.component.ts et utilisez le code suivant dans le fichier:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title  =  "Votre site apcpedagogie.com vous propose un exemple"
   +"de liaison de données utilisant l'interpolation de chaînes" ;
}

• Maintenant, ouvrez app.component.ts et utilisez le code suivant pour voir l’interpolation de chaîne.

<div class="container">
  <h2>
  {{ title }}
</h2>
</div>

• Maintenant, ouvrez app.component.html et utilisez le code suivant pour voir l’interpolation de chaîne.

• Mettez à jour le fichier app.component.ts avec le code suivant:

   nombreA: number =  13 ;
   nombreB: number =  22 ;
   nombreC: number =  12 ;

• Mettez à jour le fichier app.component.html avec le code suivant:

<p>Le résultat de la multiplication de <strong>{{ nombreA }}</strong> X <strong>{{ nombreB }}</strong>
X <strong>{{ nombreC }}</strong> est :<strong>{{nombreA*nombreB*nombreC}}</strong></p>

• La ligne suivant sera affichée: Le résultat de la multiplication de 13 X 22 X 12 est :3432

Dans la liaison de données unidirectionnelle, l’expression de modèle {{}} est utilisée pour lier une propriété au DOM.