Liaison de données Partie 3 — Liaison de propriété

La liaison de données peut être déroutante lorsque vous démarrez dans Angular. Décomposons-le ! Cet article couvre la liaison de propriété unidirectionnelle.

Il s'agit du troisième article de la liaison de données de la série Angular sur le blog. Si ce n'est pas le cas, vous devriez envisager de jeter un œil au article d'interpolation ici et au article de liaison d'événement ici.

Prérequis

Ce message convient à tous les niveaux de développeurs front-end qui utilisent Angular, il n'est donc pas supposé être familiarisé avec les concepts et les processus d'installation pour débutants.

Voici quelques conditions préalables que vous devriez avoir pour suivre la démonstration de cet article avec Angular 12 :

• Un environnement de développement intégré comme VS Code[19659007]Node version 11.0 installée sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• La dernière version d'Angular (version 12)

// 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. ?

Bien que créer des applications avec Angular et travailler avec HTML dans le modèle soit amusant, Angular le rend plus amusant en vous permettant de définir ou de modifier facilement les valeurs des éléments HTML à l'aide de la liaison de propriété.

La liaison de propriété dans Angular vous aide définir des valeurs pour les propriétés des éléments ou directives HTML. Avec la liaison de propriété, vous pouvez faire des choses telles que la fonctionnalité de bouton bascule, définir des chemins par programme et même partager des valeurs entre les composants . —  Angular Docs

La syntaxe ressemble à ceci :

[property]=”expression”

Il s'agit d'une approche de liaison de données à sens unique où vous pouvez lier les données du composant au modèle comme avec l'interpolation. Il s'agit d'une fonctionnalité intéressante car la liaison peut se produire avec chaque propriété DOM, ce qui vous offre des possibilités infinies lorsque vous créez votre application et envisagez les interactions.

Ce que nous construisons

Créons un exemple d'application Angular avec laquelle illustrer la liaison de propriétés avec divers exemples. Nous utiliserons l'Angular CLI pour générer ce projet, puis travaillerons dans le dossier des composants de l'application.

Ouvrez votre terminal et exécutez cette commande dans le répertoire de votre choix :

ng new props

Après avoir suivi les invites, la CLI créera un shell d'application que vous pourrez modifier. Maintenant, accédez au fichier app component.html et remplacez le contenu par le bloc de code ci-dessous :

<div class="toolbar" role="banner">
  <span>Bienvenue</span>
    <div class="spacer"></div >
    <a aria-label="Angular sur twitter" cible=" _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=[19659030]"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="traduire(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=[19659030]"24" viewBox="0 0 24 24"> </svg>
<input value="text1">
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"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=[19659030]"24" viewBox="0 0 24 24"> </svg>
<input value="text2">
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"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=[19659030]"24" viewBox="0 0 24 24"> </svg>
<input value="text3">
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"24" viewBox="0 0 24 24"> </svg>
    </a>
</div>
</div>

Déplacez tous les styles définis dans la section style vers le fichier component.css.

Liaison de la propriété d'entrée

Commençons par l'élément d'entrée et lions la propriété value du composant. Dans le fichier app component.ts, définissez les données que vous souhaitez lier comme ceci :

import { Component } from '@angular/core'[19659030];
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titre = 'accessoires';
  text = 'tapez votre question ici'
}

Les données sont la chaîne qui dit « tapez votre question ici ». Vous pouvez lier ces données de chaîne à la valeur de l'élément d'entrée que vous avez déjà créé avec la syntaxe de liaison de propriété que nous avons vue précédemment. Accédez simplement au fichier component.html de votre application et modifiez l'un des éléments suivants :

<input value="text1" >

À ceci :

<input [value]="text">

Cela est immédiatement lié au modèle, comme vous pouvez le voir.

Liaison aux propriétés de la classe d'éléments

Essayons autre chose : la liaison certaines données à la classe d'un élément. Nous commençons par définir les données que nous voulons lier.

import { Component } from '@angular/core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titre = 'accessoires';
  text = 'tapez votre question ici';
  selectedColor = 'vert'
}

Maintenant dans votre fichier de composant, effectuez la liaison sur l'élément d'en-tête ici :

<h2>Resources</h2>

À ceci :

<h2 [ngStyle]=”{color: chosenColor}”>Ressources</ h2>

Lorsque vous enregistrez les fichiers, vous remarquerez que la couleur de l'en-tête est maintenant verte comme prévu. nous pouvons également nous lier à l'aide de la propriété binding. Créons les données que nous voulons lier comme ceci :

import { Component } from '@angular/core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titre = 'accessoires';
  text = 'tapez votre question ici';
  selectedColor = 'vert';
  para = 'ceci est le nouveau paragraphe que vous obtenez'
}

Ensuite, vous pouvez simplement modifier cette ligne ci-dessous :

<p>Voici quelques liens pour vous aider à démarrer :</p> 

À ceci :

<p [innerText]="para">Voici quelques liens pour vous aider à démarrer : </p>

Lorsque vous enregistrez tout, vous devriez voir que la liaison a parfaitement fonctionné. Nous avons vu à quel point cela peut ressembler à l'interpolation et comment il se concentre plutôt sur les propriétés des éléments DOM dans votre modèle. Nous avons d'autres articles sur la liaison de données dans Angular que vous devriez également consulter. Bon piratage !