Un guide pratique pour angulaire: liaison de données et directive

Apprenez à appliquer la liaison de données dans Angular et à travailler avec les directives NgFor et NgIf.

Angular est un cadre de création d'applications dynamiques côté client à l'aide de HTML, CSS et JavaScript. C'est l'un des meilleurs frameworks JavaScript pour la création d'applications Web dynamiques. Dans cet article, je vais couvrir la liaison de données, à l'aide de directives structurelles et comment passer des données d'un composant à un autre.

Cet article s'appuie sur deux autres articles. J'y ai expliqué comment configurer une application angulaire et comment créer des modules, créer des composants et regrouper des fonctionnalités d'application dans des modules . Vous pouvez ignorer la lecture de ces articles si vous êtes familiarisé avec la configuration d'une application angulaire à l'aide de la CLI, et quels sont les composants et modules et comment les créer et les utiliser.

Si vous souhaitez coder, vous pouvez télécharger le code source sur GitHub . Copiez le contenu du dossier src-part-2 dans le dossier src et suivez les instructions que je vous donnerai pendant votre lecture.

Liaison de données

La liaison de données est un technique pour passer des données de la classe du composant à la vue. Il crée une connexion entre le modèle et une propriété de la classe de sorte que lorsque la valeur de cette propriété change, le modèle est mis à jour avec la nouvelle valeur. Actuellement, le composant briefing-cards affiche des nombres statiques. Nous voulons rendre cette dynamique et permettre à la valeur d'être définie à partir de la classe du composant. Ouvrez-lui la classe de son composant et les propriétés suivantes:

 @Input () currentMonthSpending: object;
@Input () lastMonthSpending: object;

Ajouter une importation pour le décorateur @Input sur la première ligne:

 import {Component, OnInit, Input} de "@ angular / core";

Vous venez d'ajouter deux nouvelles propriétés avec le type défini sur l'objet car nous ne voulons pas créer un nouveau type pour les données. Le décorateur @Input () est un moyen de permettre à un composant parent de transmettre des données à un composant enfant. Nous voulons que les données de ces propriétés proviennent du composant parent qui est home . Avec cela en place, nous voulons maintenant lier cette propriété au modèle. Mettez à jour le modèle de composant briefing-cards avec le code ci-dessous:

  

    

      

         {{lastMonthSpending.month}}
      
      

        
 $ {{lastMonthSpending.amount}} 
      
    
  
  

    

      

         {{currentMonthSpending.month}}
      
      

        
 $ {{currentMonthSpending.amount}} 
      
    
  

C'est presque le même code qu'avant, sauf que maintenant nous utilisons une syntaxe de modèle {{}} aux lignes 5, 8, 15 et 18. Ceci est appelé interpolation et est un moyen pour mettre des expressions dans du texte balisé. Vous spécifiez ce que vous voulez qu'il résolve entre les accolades, puis Angular l'évalue et convertit le résultat en une chaîne qui est ensuite placée dans le balisage.

Utilisation des directives NgIf et NgFor

Nous voulons également remplacer les données statiques dans liste de dépenses pour utiliser les données de la logique du composant. Ouvrez dépenses-list.component.ts et ajoutez une référence au décorateur @Input :

 import {Component, OnInit, Input} de "@ angular / core";

Ajoutez la propriété suivante à la classe du composant:

 @Input () dépenses: IExpense [] = [];
@Input () showButton: boolean = true;

La propriété showButton est mappée sur un type booléen, avec une valeur par défaut qui lui est affectée lorsque la classe est initialisée. La propriété dépenses contiendra les données à afficher dans l'élément de table. Il est lié à un type de IExpense . Ce type représente les données de dépenses pour l'application. La propriété sera un tableau de IExpense avec la valeur par défaut définie sur un tableau vide.

Allez-y et créez le type en ajoutant un nouveau fichier src / app / dépenses / dépenses. ts . Ajoutez-y le code ci-dessous.

 exportez l'interface par défaut IExpense {
  description: chaîne;
  montant: nombre;
  date: chaîne;
}

Nous avons défini un type d'interface appelé IExpense avec des propriétés pour contenir les données de dépenses. Une interface définit un ensemble de propriétés et de méthodes utilisées pour identifier un type. Une classe peut choisir d'hériter d'une interface et de fournir l'implémentation à ses membres. L'interface peut être utilisée comme type de données et peut être utilisée pour définir des contrats dans le code. Le type IExpense qui est défini comme le type pour la propriété dépenses imposerait que la valeur provenant du composant parent corresponde à ce type et ne peut contenir qu'un tableau de ce type. [19659003] Ouvrez dépenses-list.component.ts et ajoutez une déclaration d'importation pour le type nouvellement défini.

 import IExpense de "../expense";

Avec la logique de notre composant définie pour prendre en charge le modèle, mettez à jour dépenses-list.component.ts avec le balisage ci-dessous:

    
  

  

     Ajouter une dépense 
  
  

    

      
 Description 
      
 Date 
      
 Montant [19659032] {{dépenses.description}} 
      
 {{dépenses.date}} 
      
 $ {{dépenses.amount}} 

Vous avez mis à jour le modèle pour utiliser la liaison de données et également utilisé certaines directives. À la ligne 2, vous devriez remarquer * ngIf = "showButton" et à la ligne 13, vous devriez voir * ngFor = "let dépenses de dépenses" . Les * ngIf et * ngFor sont appelées directives structurelles. Les directives structurelles sont utilisées pour façonner la vue en ajoutant ou en supprimant des éléments du DOM. Un astérisque (*) précède le nom d'attribut de la directive pour indiquer qu'il s'agit d'une directive structurelle.

La directive NgIf (notée * ngIf ) ajoute ou supprime des éléments du DOM. Il est placé sur l'élément qu'il doit manipuler. Dans notre cas, la balise

. Si la valeur de showButton est définie sur true, il restituera cet élément et ses enfants au DOM.

La directive NgFor (utilisée comme * ngFor ]) est utilisé pour répéter les éléments auxquels il est lié. Vous spécifiez un bloc de code HTML qui définit la façon dont un élément unique doit être affiché, puis Angular l'utilise comme modèle pour le rendu de chaque élément du tableau. Dans notre exemple, il s'agit de l'élément

avec les colonnes liées aux données de chaque élément du tableau.

Passage de données aux composants enfants

Le composant home est le parent de composants de cartes d'information et liste de dépenses . Nous allons transmettre les données dont ils ont besoin du parent à ces composants. C'est pourquoi nous avons défini les propriétés des données avec des décorateurs @Input . La transmission de données à un autre composant se fait via la liaison de propriétés.

La liaison de propriété est utilisée pour définir les propriétés des éléments cibles ou des décorateurs @Input () du composant. La valeur s'écoule de la propriété d'un composant vers la propriété de l'élément cible et vous ne pouvez pas l'utiliser pour lire ou extraire des valeurs des éléments cibles.

Allons de l'avant et appliquons-la. Ouvrez src / app / home / home.component.ts . Ajoutez les propriétés ci-dessous à la définition de classe:

 dépenses: IExpense [] = [
  {
    description: "First shopping for the month",
    amount: 20,
    date: "2019-08-12"
  },
  {
    description: "Bicycle for Amy",
    amount: 10,
    date: "2019-08-08"
  },
  {
    description: "First shopping for the month",
    amount: 14,
    date: "2019-08-21"
  }
];
currentMonthSpending = {montant: 300, mois: "juillet"};
lastMonthSpending = {montant: 44, mois: "août"};

Ajoutez ensuite l'instruction d'importation pour le type IExpense .

 importez IExpense à partir de "../expenses/expense";

Ouvrez home.component.html et ajoutez une propriété de liaison aux directives de composant comme vous le voyez ci-dessous:

Les crochets qui entourent identifient les propriétés cibles, ce qui est le même que le nom des propriétés définies dans ces composants.

Avec cette configuration, testons que notre code fonctionne comme prévu. Ouvrez la ligne de commande et exécutez ng serve -o pour démarrer l'application. Cela lance votre navigateur par défaut et ouvre l'application Web.

Conclusion

Dans cet article, vous avez appris à utiliser les directives structurelles NgIf et NgFor. Je vous ai également montré comment appliquer la liaison de données pour dynamiser l'application et utiliser les décorateurs @Input pour partager des données entre les composants. Vous pouvez obtenir le code source sur GitHub dans le dossier src-part-3 .

Gardez un œil sur la prochaine partie de ce didacticiel qui couvrira le routage et les services, et l'injection de dépendance. ✌️

---