Liaisons d'attributs, de classes et de styles

La syntaxe du modèle fournit des liaisons unidirectionnelles spécialisées pour des scénarios moins bien adaptés au property binding.

Attribute binding (Liaison d'attribut)

Vous pouvez définir la valeur d'un attribut directement avec une liaison d'attribut. Il s'agit de la seule exception à la règle selon laquelle une liaison définit une propriété cible. C'est la seule liaison qui crée et définit un attribut.

Ce guide souligne à plusieurs reprises que la définition d'une propriété d'élément avec une liaison de propriété est toujours préférable à la définition de l'attribut avec une chaîne. Pourquoi Angular propose-t-il une liaison d'attribut ? Vous devez utiliser la liaison d'attribut lorsqu'il n'y a pas de propriété d'élément à lier.

Considérez les attributs ARIA (Accessible Rich Internet Applications), SVG (Scalable Vector Graphics) et de table. Ce sont des attributs purs. Ils ne correspondent pas aux propriétés des éléments et ne définissent pas les propriétés des éléments. Il n'y a pas de cibles de propriété à associer.

Ce fait devient douloureusement évident lorsque vous écrivez quelque chose comme ça.

Et vous obtenez cette erreur:

Comme le message l'indique, l'élément ‹td› n'a pas de propriété colspan. Il possède l'attribut colspan, mais l'interpolation et la liaison de propriétés ne peuvent définir que des propriétés, pas des attributs.

Vous avez besoin de liaisons d'attributs pour créer et vous lier à de tels attributs.

La syntaxe de liaison d'attribut ressemble à la liaison de propriété. Au lieu d'une propriété d'élément entre crochets, commencez par le préfixe attr, suivi d'un point (.) et du nom de l'attribut. Vous définissez ensuite la valeur de l'attribut à l'aide d'une expression qui se résout en une chaîne. Lier [attr.colspan] à une valeur calculée:

Voici comment la table est rendue :


L'un des principaux cas d'utilisation de la liaison d'attributs consiste à définir les attributs ARIA, comme dans cet exemple:

Class binding (Liaison de classe)

Vous pouvez ajouter et supprimer des noms de classe CSS de l'attribut class d'un élément avec une liaison de classe.

La syntaxe de liaison de classe ressemble à la liaison de propriété. Au lieu d'une propriété d'élément entre parenthèses, commencer par le préfixe class, éventuellement suivi d'un point (.) et le nom d'une classe CSS : [class.class-name].

Les exemples suivants montrent comment ajouter et supprimer la classe "spéciale" de l'application avec des liaisons de classe. Voici comment définir l'attribut sans liaison :

Vous pouvez remplacer cela par une liaison à une chaîne des noms de classe souhaités; Il s'agit d'une liaison de remplacement tout-ou-rien.

Enfin, vous pouvez vous connecter à un nom de classe spécifique. Angular ajoute la classe lorsque l'expression du modèle est évaluée comme une vérité. Il supprime la classe lorsque l'expression est falsy.

Bien qu'il s'agisse d'un moyen efficace de basculer entre un nom de classe unique, la directive NgClass est généralement recommandée lors de la gestion simultanée de plusieurs noms de classes.

Style binding (Reliure de style)

Vous pouvez définir des styles en ligne avec une liaison de style.

La syntaxe de liaison de style ressemble à la liaison de propriété. Au lieu d'une propriété d'élément entre parenthèses, commencer par le préfixe style, suivi d'un point (.) et le nom d'une propriété de style CSS : [style.style-property].

Certains styles de reliure de style ont une extension d'unité. L'exemple suivant définit de manière conditionnelle la taille de la police en unités "em" et "%".

Bien qu'il s'agisse d'un moyen efficace de définir un seul style, la directive NgStyle est généralement préférée lors de la définition simultanée de plusieurs styles en ligne. Notez qu'un nom de propriété de style peut être écrit en dash-case, comme indiqué ci-dessus, ou en camelCase, tel que fontSize.