Liaison de données Partie 4— Liaison d'attributs

La liaison de données peut être déroutante lorsque vous démarrez dans Angular. Décomposons-le ! Cet article couvre la liaison d'attributs à sens unique.

Ceci est un autre article sur la liaison de données dans Angular. Si vous ne l'avez pas fait, assurez-vous de consulter les articles précédents où nous avons examiné interpolationliaison d'événements et liaison de propriété.

Prérequis[19659004]Ce post est adapté à 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 :[19659006]Visual Studio Code comme environnement de développement intégré

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

Nous allons utiliser l'assistant de modèle d'interface utilisateur Kendo pour générer un nouveau projet de test dans lequel nous montrerons comment fonctionne la liaison d'attributs.

Ouvrez votre application VS Code et accédez à la palette de commandes (tapez Commande + Maj + P sur Mac ou Ctrl + Maj + P sur PC) pour ouvrez l'assistant d'interface utilisateur de Kendo. Si vous ne l'avez pas déjà installé, allez dans l'onglet Extensions, recherchez Kendo UI Template Wizard et installez-le. Redémarrez l'application VS Code, puis revenez à la palette de commandes pour ouvrir l'assistant d'interface utilisateur Kendo.

Maintenant, tout est prêt. Voici à quoi ressemble la syntaxe de la liaison d'attribut :

[attr.attributeName]="expression"

Qu'est-ce que la liaison d'attributs ?

La liaison d'attributs vous permet essentiellement de lier les attributs des éléments du composant au modèle de vue. Il s'agit d'une approche de liaison de données à sens unique, tout comme la liaison de propriété.

La liaison d'attributs dans Angular vous aide à définir directement les valeurs des attributs. Avec la liaison d'attributs, vous pouvez améliorer l'accessibilité. —  Angular Docs

Si vous avez suivi la série, vous pouvez vous demander quelle est la différence entre la liaison de propriété et la liaison d'attribut. Une façon de voir les choses est la différence entre les attributs et les propriétés.

Attributs et propriétés

Les attributs et les propriétés ne sont pas vraiment les mêmes car les attributs sont définis par HTML et les propriétés sont définies par le DOM lui-même. De plus, les attributs initialisent essentiellement les propriétés DOM et, une fois qu'ils le font, les valeurs de ces propriétés ne peuvent pas changer. Pendant ce temps, les valeurs des propriétés peuvent changer.

Un moyen plus direct de les voir est les attributs HTML et les propriétés DOM. Nous pouvons voir une illustration qui explique mieux ceci :

Dans votre fichier app component.html, remplacez le contenu par le bloc de code ci-dessous :

<div class=" content">
    <app-header></app-header>
    <router-outlet>
        <input type="text" value= "Nouvelle valeur"> <br>
    </router-outlet>
    
</div>
<div class="footer">
    <app -footer></app-footer>
</div>

Maintenant, exécutez la commande dev server ci-dessous pour exécuter l'application dans localhost :

 ng serve

Vous pouvez voir le champ de saisie ici avec la valeur de "nouvelle valeur" comme prévu.

Cliquez maintenant sur la zone de saisie et inspectez-le pour afficher la console de votre navigateur. À l'intérieur, tapez ces commandes :

$0.getAttribute(‘value’)
$0.valeur

Vous verrez qu'ils renvoient tous les deux la même valeur. Remplacez maintenant le texte de la zone de saisie par autre chose et réexécutez les deux commandes ci-dessus dans la console. Les résultats montrent que les attributs ne changent pas.

<div class="content"[19659041]> <app-header></app-header> <router-outlet> <entrée type="text" valeur="Nouvelle valeur" > <br> <br> <table style="border- collapse: collapse;"> <thead style="border[19659041]: 1px noir uni;"> <tr> <th colspan="1" style="bordure: 1px noir uni;"> Liste d'amis </th> </tr> </thead> <tbody style="border: 1px noir uni;"> <tr > <td>Lotanna</td> <td>Nwose[19659142]</td> </tr> <tr> <td>[19659160]Jean</td> <td>Biche</td> </ tr> <tr> <td>Olivia</td>[19659130]<td>Pape</td> </tr> <tr> <td>Jeff</td> <td>[19659160]Bezos</td> </tr> </tbody> </tableau > </routeur-outlet> </div> <div class=[19659041]"footer"> <app-footer></app-footer> < /div>

C'est un tableau simple avec 4 lignes et 2 colonnes. Nous allons définir l'étendue des colonnes pour l'en-tête du tableau.

Assurez-vous maintenant que votre fichier app component.ts ressemble à ceci :[19659079]import { Composant } de '@angular/core';
@Composant({
sélecteur : 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
colVal: nombre = 2
}

Nous avons initialisé la valeur 2 pour cela. Maintenant, si vous revenez au modèle et changez le 1 en colVal, vous voyez que rien ne se passe. Si vous en faites aussi un cas d'interpolation, encore une fois, rien ne se passe. Si vous essayez d'effectuer une liaison de propriété, vous obtiendrez l'erreur de propriété inconnue indiquant qu'il ne s'agit pas d'une propriété connue de l'élément de table. Allez-y et modifiez le bloc ci-dessous pour inclure la syntaxe d'attribut comme ceci :

<tr>
    <th [attr.colspan]="colVal"  style="border: 1px noir uni;">
                        Liste d'amis
     </th>
</tr>

Vous voyez que l'espacement des colonnes fonctionne maintenant comme vous l'attendez.

Conclusion

Dans cet article, nous avons examiné la liaison d'attributs, comment elle est utilisée et quand elle est utilisée. Nous avons examiné à quel point il est similaire à la liaison de propriété et aux recommandations d'Angular. Nous avons également vu pourquoi la liaison d'attributs peut être importante avec colspan. Restez à l'écoute pour plus de messages sur la liaison de données.