Liaison de données dans Angular

Objectifs

• Connaitre la directive ngModul d'angular
• Etre capable d'utiliser la directive ngModul d'angular

Présentation

• La liaison de données dans Angular est la synchronisation entre le modèle et la vue.
• La liaison de données est le concept utilisée dans Angular pour définir la communication entre un composant et le DOM.
• Cette liaison peut être une liaison de données unidirectionnelle ou une liaison de données bidirectionnelle.
• La liaison de données est le concept important d'Angular. Il nous permet de définir la communication entre le composant et la vue. La liaison de données est transmise du composant à la vue et de la vue au composant.
• Dans ce tutoriel nous découvrirons les différents types de liaison de données à savoir:
  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)

Interpolation de chaînes dans Angular

• L'interpolation de chaînes est une technique de liaison de données unidirectionnelle qui est utilisée pour sortir les données d'un code TypeScript vers un modèle HTML (affichage).
• Il utilise l'expression de modèle entre deux accolades pour afficher les données du composant dans la vue. L'interpolation de chaînes ajoute la valeur d'une propriété du composant.

• Exemple 01

  • 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>

Exemple 02

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

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

Reliure de propriété (Property Binding)

Interpolation de chaînes dans Angular

Interpolation de chaînes dans Angular