Liaison de données Partie 8 — Liaison de données bidirectionnelle

La liaison de données peut être déroutante lorsque vous démarrez dans Angular. Décomposons-le ! Cet article couvre la liaison de données bidirectionnelle. Aujourd'hui, nous examinerons la liaison de données bidirectionnelle dans Angular.

Prérequis

Ce message convient à tous les niveaux de développeurs front-end qui utilisent Angular. Voici quelques prérequis que vous devez avoir avant de commencer à utiliser Angular 12 et suivez la démonstration de cet article : 6.7 (il est généralement livré avec l'installation de Node)

// exécuter la commande dans un terminal
ng version

Confirmez que vous utilisez la version 12, et mettez à jour vers la 12 si ce n'est pas le cas. -Way Data Binding ?

Lorsque vous liez des événements dans votre modèle Angular à un composant et que les modifications apportées au modèle sont également mises à jour dans les données du composant, ce que vous faites s'appelle une liaison de données bidirectionnelle. Le flux de données ici est bidirectionnel, ce qui signifie qu'il peut aller dans les deux sens. Une bonne description de celui-ci est qu'il s'agit d'une combinaison de liaison d'événements et de liaison de propriété .

L'un des cas d'utilisation les plus populaires pour la liaison de données bidirectionnelle est de travailler avec formes. Plusieurs fois, vous souhaitez représenter les données que vous collectez auprès d'un utilisateur en temps réel d'une manière ou d'une autre.

Dans la liaison de données bidirectionnelle, les données sont liées à l'aide de la directive ngModel, qui nécessite le fonctionnement de Angular FormsModule. La syntaxe banana-in-a-box pour cela ressemble à ceci :

Ce que nous construisons

Nous allons utiliser la CLI angulaire pour générer une nouvelle application de test où nous pouvons tester la liaison de données bidirectionnelle et montrer comment vous pouvez facilement l'utiliser dans votre flux de travail aujourd'hui.

Plus précisément, nous allons reproduire ce jeu de frappe avec une fonction qui vous permet de voir exactement ce que vous tapez dans une zone de saisie d'un autre élément du modèle.

Ouvrez votre code VS à l'emplacement de votre choix, ouvrez le terminal et exécutez cette commande :

ng new twoway

Assurez-vous de répondre aux invites comme ceci :

 ? Souhaitez-vous ajouter un routage angulaire ? Non
? Quel format de feuille de style souhaitez-vous utiliser ? CSS

Maintenant que votre nouveau projet a été généré, accédez-y comme ceci :

cd bidirectionnel
servir

Accédez maintenant au dossier src et dans le fichier app component.html, copiez les styles dans le fichier app.component.css. Remplacez ensuite le contenu de l'application par le bloc de code ci-dessous :

<div class="toolbar" role[19659032]="banner">
  <span>Bienvenue</span> 
    <div class="spacer"></div >
    <a aria-label="Angular sur twitter" target=" _blank" rel="noopener" href="https:// twitter.com/angular" title="Twitter">
    </a>
</div>
<div class="content" role="main ">

  <div class="card Highlight-card card-small">
<svg id="fusée" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" largeur=[19659033]"101.678" hauteur="101.678" viewBox="0 0 101,678 101,678">
      <g id="Group_83" data-name="Groupe 83 " transform="translate(-141 -696)">
        <circle id="Ellipse_8" data-name="Ellipse 8 " cx="50.839" cy="50.839"  r="50.839" transform="translate(141 696)"  fill="#dd0031"/>
      </g>
    </svg>
L'application <span>{{ title }} est en cours d'exécution !</span>
<svg id="fusée-fusée" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" largeur ="516.119" hauteur="1083.632" viewBox= "0 0 516.119 1083.632">
    </svg>
</div>

  <h2>Ressources</h2>
  <p>Voici quelques liens pour vous aider vous commencez :</p>
<div class="card-container">
    <a class="carte" cible="_blank " rel="noopener" href=#>
      <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659033]"24" viewBox="0 0 24 24"> </svg>
<span>Bonjour</span>
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659033]"24" viewBox="0 0 24 24"> </svg> </a>
<a class="carte" cible="_blank " rel="noopener" href=#>
      <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659033]"24" viewBox="0 0 24 24"> </svg>
<span>Bonjour</span>
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659033]"24" viewBox="0 0 24 24"> </svg>
    </a>
<a class="carte" cible="_blank " rel="noopener" href=#>
      <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659033]"24" viewBox="0 0 24 24"> </svg>
<span>Bonjour</span>
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659033]"24" viewBox="0 0 24 24"> </svg>
    </a>
</div>
</div>

Si vous exécutez la commande ci-dessous dans votre terminal, l'application devrait maintenant ressembler à ceci :

 ng serve

Ouvrez le fichier HTML du composant d'application et dans la section de la carte de surbrillance, remplacez le contenu par le bloc de code ci-dessous :

<h2[19659033]>Tapez n'importe quoi</h2>
<input type="text" [value]="nom" (entrée)="name=$event.target.value">
<h>
    <div class="spacer"></div >
    <a aria-label="Angular sur twitter" target=" _blank" rel="noopener" href="https:// twitter.com/angular" title="Twitter">
    </a>
</div>
<div class="content" role="main ">

  <div class="card Highlight-card card-small">
<svg id="fusée" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" largeur=[19659033]"101.678" hauteur="101.678" viewBox="0 0 101,678 101,678">
      <g id="Group_83" data-name="Groupe 83 " transform="translate(-141 -696)">
        <circle id="Ellipse_8" data-name="Ellipse 8 " cx="50.839" cy="50.839"  r="50.839" transform="translate(141 696)"  fill="#dd0031"/>
      </g>
    </svg>
<span>Vous venez de taper {{name}}</span>
<svg id="fusée-fusée" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" largeur ="516.119" hauteur="1083.632" viewBox= "0 0 516.119 1083.632">
    </svg>
</div>

Vous pouvez maintenant voir la liaison de propriété que nous avons créée, attribuer l'entrée de l'utilisateur à la propriété name, puis lier la cible de l'événement sur le même élément à la même propriété. C'est littéralement ainsi que fonctionne la liaison d'événements.

En définissant la propriété name, ouvrez le fichier app component.ts et remplacez le contenu par ce bloc de code :

import { Component }[19659519]de '@angular/core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titre = 'bidirectionnel';
  nom="";
}

Si vous enregistrez tous les fichiers maintenant et vérifiez votre navigateur sur localhost:4200, cela devrait être exactement comme vous l'attendez. 19659544]L'utilisation de ngModel

Angular a une directive qui rend ce processus encore plus facile à gérer en une seule instruction. La directive s'appelle la directive ngModel utilisée dans Angular pour gérer la liaison de données. Le meilleur cas d'utilisation où ngModel est utile est lors de la gestion des formulaires dans vos applications.

Modifiez ces lignes dans le fichier app component.html à partir de :

<input type= "text" [value]="nom" (entrée)= "nom=$événement.cible.valeur">
<span>Vous venez de taper {{name}}</span>

à ce bloc de code ci-dessous :

<input type="text" name=[19659033]"valeur" [(ngModel)]="valeur">
<span>Vous venez de taper {{value}}</span>

Pour que cela fonctionne, nous devons importer le FormsModule dans notre fichier de module d'application :

import { BrowserModule } from '@angular/platform-browser ';
import { NgModule } from '@angular/core';
import { AppComponent } de './app.component';
import { FormsModule } de '@angular/forms ';
@NgModule({
  déclarations : [
    AppComponent
  ],
  importations : [
    FormulairesModule,
    NavigateurModule
  ],
  fournisseurs : [],
  bootstrap : [AppComponent]
})
export class AppModule { }

Enfin, modifiez le nom de la propriété dans le fichier component.ts de name en value et vous êtes prêt. et comment Angular l'a rendu encore plus facile grâce à ngModel. Nous avons vu à quel point il peut être utile de pouvoir lier des données dans deux directions au lieu d'une seule comme nous l'avons vu dans les articles récents. Comment aimeriez-vous utiliser ngModel dans vos formulaires aujourd'hui ?

Liens rapides vers notre série de liaison de données Angular Basics