Tout sur les liaisons angulaires

Les liaisons angulaires sont un mécanisme extrêmement puissant intégré au cadre. Malheureusement, ils peuvent être difficiles à retenir. Cet article de blog d'Alyssa Nicoll aidera.

Angular fournit un mécanisme puissant pour une large gamme de reliures. Vous n’êtes pas obligé d’être nouveau pour oublier quelle liaison est quelle liaison. Parfois, lorsque je cherche la bonne liaison, je me trompe ou j'oublie la syntaxe. Je pensais qu'un article pourrait aider à clarifier comment et quand appliquer des liaisons dans vos applications Angular, pour ces moments de mémoire que nous avons tous parfois.

Vous trouverez ci-dessous un tableau pratique pour une référence rapide (lié à chaque section):

Il inclut tous les types de liaisons angulaires, ainsi qu'une ligne de balises indiquant comment utiliser ces liaisons. Nous traiterons de toutes les liaisons plus en détail dans les sections ci-dessous, à l'exception de la liaison d'attribut, que j'ai trouvé assez rare.

Liaison de propriété

Dans Angular, la liaison la plus simple est la liaison de propriété. Il utilise des crochets `[ ]` pour faire le travail. Il s'agit d'une liaison à sens unique entre le composant et le modèle.

Interpolation de chaîne et liaison de propriété

Vous pouvez également utiliser l'interpolation de chaîne pour obtenir la même liaison de propriété:

L'interpolation de chaîne convient mieux au texte entre les éléments d'ouverture et de fermeture:

 {{amazingTitle}} 19659011] Cette même approche peut être utilisée via une liaison de propriété, mais elle est moins intuitive. Dans l'exemple ci-dessus, nous pouvons obtenir le même résultat avec l'attribut  textContent : 
 
 
 En définitive, il s'agit d'une préférence personnelle. Les boutons de Kendo UI tirent parti de différents types de liaisons de propriétés afin de vous permettre de personnaliser l'aspect de nos boutons. Par exemple, vous pouvez définir [icon] sur un nombre quelconque d'icônes ( trouvé ici ). Vous pouvez également définir le bouton [look] du bouton sur le contour  plat  ou le  défaut ! Pour en savoir plus sur l'impressionnant bouton personnalisable de l'interface de Kendo cliquez ici .
 {{btnValue}} 
 Nous utilisons ici une interpolation de chaîne pour lier la valeur du bouton. En même temps, nous utilisons des liaisons de propriétés pour les icônes   et  look . Il est important de mentionner que les deux types de liaison sont des liaisons à sens unique; du composant au modèle. Vous devrez faire preuve de discrétion pour le type de liaison que vous utilisez. Encore une fois, cela dépend des préférences personnelles.
 Reliure de style
 Un autre type de liaison de propriété est la liaison de style.Vous pouvez ajouter des styles en ligne à la logique! Si nous souhaitons appliquer des styles en ligne à ce bouton, nous pouvons le faire entre crochets:
  
 Dans l'exemple ci-dessus, la couleur d'arrière-plan a été remplacée par  rebeccaPurple mais toute valeur de couleur acceptable pour les CSS (HEX, RGB, etc.) fonctionnera.  Vérifiez W3Schools  pour. une liste complète des propriétés de style DOM auxquelles vous pouvez vous connecter.
 
 Voyons maintenant le même exemple, mais avec une certaine logique:
  
 Ici, nous lions la couleur de fond. pour  rebeccaPurple  uniquement si la variable  estActive  est  true . Sinon, la couleur d'arrière-plan est définie sur  white .
 La reliure de style est donc une propriété qui lie le style [style.PROPERTY] suivie de la propriété que vous souhaitez modifier.
 Vous pouvez jouer avec les reliures de style dans ce StackBlitz!
 Liaison à un événement
 Notre bouton est assez élégant, mais nous devons réellement définir / annuler la définition du  Nous pouvons utiliser la liaison d’événements pour capturer divers événements initiés par l’utilisateur et lancer la logique dans notre classe de composants. Angular prend en charge  de nombreux types d’événements . Si nous souhaitons saisir l’événement click sur notre bouton et le lier à une méthode, nous pouvons le faire en utilisant des parenthèses: 
 (click) = "toggleActive ()" 
 Ici, nous lions la méthode  toggleActive  à appeler  cliquez sur . La méthode  active / désactive  ne fait que définir la variable  active  sur ! Active . Nous utilisons ensuite t Il oblige la classe à donner à notre bouton une classe  active . Le bouton sera rebeccaPurple lorsqu'il est actif et gris s'il ne l'est pas. Nous avons également défini ces modifications pour qu'elles surviennent en survol lorsqu'elles sont actives:  .k-button.active: survol .
 / * styles.css * /

.k-button.active, .k-button.active: survol {
  couleur de fond: rebeccaPurple;
  Couleur blanche;
} 
 // app.component.ts


        {{btnValue}}
 
 Liaison bidirectionnelle
 Jusqu'à présent, nous avons examiné les différentes manières d'établir des liaisons unidirectionnelles ou unidirectionnelles. Un autre type de liaison est une liaison bidirectionnelle ou deux. Les liaisons bidirectionnelles sont utilisées lorsqu'un développeur souhaite propager les modifications apportées à une valeur ou à un événement sous-jacent entre un composant et son modèle.
 Dans Angular, nous pouvons utiliser  ngModel  pour créer ces deux Utilisons le même exemple que nous avions construit précédemment avec Kendo UI Tout d'abord, nous devons importer le  FormsModule  pour avoir accès à  ngModule :
 
Next, nous devons inclure les entrées de l'interface Kendo UI pour cet exemple:
  import {Component} de '@ angular / core';  @Composant({
  sélecteur: 'my-app',
  modèle: ``
})  classe d'exportation AppComponent {
  email = "bob@gmail.com";
  // ...
  onEnter () {
    alert (this.email);
  }
}
 Nous utilisons ici la propriété binding pour lier la valeur de ce  kendoTextBox  à un courrier électronique. L'événement  keyup.enter  est lié à la méthode  onEnter ()  qui affiche le courrier électronique entré par l'utilisateur. Malheureusement, lorsque nous modifions l'élément  et que nous appuyons sur Entrée, l'alerte n'est pas mise à jour. Que se passe-t-il?
  .
 Maintenant, au lieu d'une liaison à sens unique, nous sommes une liaison à double sens avec [(ngModel)]. Pour cela, nous devrons utiliser à la fois les crochets et les parenthèses [()]. La valeur email change maintenant dans l'alerte affichée. ? ça marche! Ça marche!
 
 Récapitulatif des liaisons
 Pour récapituler, les liaisons unidirectionnelles utilisent les crochets [] pour les propriétés, les styles et les classes. nous devons utiliser des parenthèses  ()  et pour la reliure à deux voies, nous utilisons les deux [()] crochets et parenthèses!
 Binding
 Exemple
 Propriété Binding
 Interpolation de chaîne
 19659065] Reliure d'attribut
 
 Reliure de style
 Liaison de classe
 Liaison à un événement
 Liaison à double sens
 J'espère que vous avez apprécié cette fête de reliure et que vous ne les avez plus jamais mélangés! Il existe quelques liens supplémentaires vers la documentation sur les composants utilisés ci-dessus. Joyeux codage
 Ressources