Angular - 2.14 Propriété Binding

Dans le dernier cours, nous avons vu l'interpolation de chaînes de caractères qui est un excellent outil pour sortir des données dans un modèle. Maintenant, je veux jeter un coup d'oeil à la liaison de propriété. En passant, il y a beaucoup de cas où vous pouvez utiliser soit la liaison de propriété, soit l'interpolation de chaîne. Je vais vous montrer ce que je veux dire dans un instant.

Allons dans notre composant de serveurs où nous gérons tous les serveurs et je veux permettre à l'utilisateur d'ajouter de nouveaux serveurs. Donc nous aurons besoin d'un bouton sur lequel je dirai "ajouter un serveur". Et je vais juste ajouter quelques classes CSS, "btn" et "btn-primary", pour que cette partie soit jolie, tout ça en utilisant les classes CSS normales de Bootstrap, rien à voir avec Angular.

Pour refléter ce changement dans mon composant serveur ici, je veux aussi commenter le modèle en ligne et pointer à nouveau vers le modèle externe. Donc, "templateUrl" doit pointer vers mon fichier "servers.component.html", comme ceci. Maintenant, si j'enregistre ce fichier, nous voyons ce bouton ici. Pour l'instant, ça n'a aucun sens que je puisse cliquer sur ce bouton car il ne fait rien. Nous n'avons pas encore appris à réagir à un clic de bouton. Donc, je vais ajouter une nouvelle propriété dans mon code TypeScript ici que je vais nommer "allowNewServer" et la mettre à false.

Maintenant, c'est aussi une autre propriété qui contient une valeur booléenne, donc vrai ou faux, dans ce cas faux car je ne veux pas autoriser l'utilisateur à créer un nouveau serveur et vous pouvez encore imaginer que ceci est en quelque sorte dérivé dynamiquement, nous allons bientôt travailler avec des données dynamiques.

Donc, dans le fichier HTML ici, je veux maintenant désactiver le bouton. Et comme vous le savez probablement, il existe un attribut "disabled" que vous pouvez ajouter, comme ceci. Si nous sauvegardons maintenant, le bouton est désactivé, je ne peux pas cliquer dessus. C'est bien mais c'est codé en dur dans le HTML. Maintenant, peut-être que ce code "allowNewServer" ici change cependant, peut-être qu'il n'est pas réglé comme ça tout le temps. Donc, nous ne serions pas en mesure de réagir à cela.

Et je peux en fait le démontrer. Pour l'instant, dans le constructeur qui est simplement une méthode exécutée au moment où ce composant est créé par Angular, en appelant "setTimeout", une fonction Javascript normale et ici je définis après quelle période de temps ou après combien de millisecondes quelque chose doit se passer, donc après 2000 millisecondes qui sont deux secondes, je veux exécuter une fonction et ici j'utilise une fonction flechée ES6.

Cette syntaxe peut paraître étrange, c'est presque la même chose qu'une fonction comme celle-ci, avec quelques différences quand il s'agit de gérer le mot-clé this. Mais en fin de compte, ici vous avez passé les arguments et ici vous avez le corps

Donc, en résumé, dans ce dernier cours, nous avons vu l'interpolation de chaînes de caractères, qui est un excellent outil pour sortir des données dans un modèle. Maintenant, nous allons nous intéresser à la liaison de propriété.

Il y a beaucoup de cas où vous pouvez utiliser soit la liaison de propriété, soit l'interpolation de chaîne. Je vais vous montrer ce que je veux dire dans un instant. Allons dans notre composant de serveurs où nous gérons tous les serveurs et je veux permettre à l'utilisateur d'ajouter de nouveaux serveurs.

Nous aurons besoin d'un bouton sur lequel je dirai "ajouter un serveur", et je vais juste ajouter quelques classes CSS, "btn" et "btn-primary", pour que cette partie soit jolie. Tout ça en utilisant les classes CSS normales de Bootstrap, rien à voir avec Angular. Pour refléter ce changement dans mon composant serveur, je veux aussi commenter le modèle en ligne et pointer à nouveau vers le modèle externe. Donc, templateUrl doit pointer vers mon fichier servers.component.html, comme ceci.

Maintenant, si j'enregistre ce fichier, nous voyons ce bouton ici. Pour l'instant, ça n'a aucun sens que je puisse cliquer sur ce bouton car il ne fait rien, nous n'avons pas encore appris à réagir à un clic de bouton. Donc je vais ajouter une nouvelle propriété dans mon code TypeScript ici que je vais nommer "allowNewServer" et la mettre à false.

Maintenant, c'est aussi une autre propriété qui contient une valeur booléenne, donc vrai ou faux, dans ce cas faux car je ne veux pas autoriser l'utilisateur à créer un nouveau serveur. Vous pouvez encore imaginer que ceci est en quelque sorte dérivé dynamiquement, nous allons bientôt travailler avec des données dynamiques.

Donc dans le fichier HTML ici, je veux maintenant désactiver le bouton. Comme vous le savez probablement, il existe un attribut "disabled" que vous pouvez ajouter, comme ceci. Si nous sauvegardons maintenant, le bouton est désactivé, je ne peux pas cliquer dessus. C'est bien mais c'est codé en dur dans le HTML. Maintenant peut-être que ce code "allowNewServer" ici change cependant, peut-être qu'il n'est pas réglé comme ça tout le temps. Nous ne serions pas en mesure de réagir à cela, et je peux en fait le démontrer.

Pour l'instant, dans le constructeur, qui est simplement une méthode exécutée au moment où ce composant est créé par Angular, en appelant setTimeout, une fonction Javascript normale, et ici je définis après quelle période de temps ou après combien de millisecondes quelque chose doit se passer, donc après 2000 millisecondes qui sont deux secondes, je veux exécuter une fonction, et ici j'utilise une fonction fléchée ES6. Cette syntaxe peut paraître étrange, c'est presque la même chose qu'une fonction comme celle-ci, avec quelques différences quand il s'agit de gérer le mot-clé "this". Mais en fin de compte, ici vous avez passé les arguments et ici vous avez le corps de la fonction, plus important encore, ici, je peux définir "allowNewServer" et ça ne marcher

Maintenant, si nous regardons notre application dans le navigateur, nous verrons que le bouton est désormais désactivé au chargement initial de la page, car la valeur de la propriété allowNewServer est initialisée à false.

Cependant, si nous attendons deux secondes, grâce au setTimeout que nous avons défini dans le constructeur, la valeur de allowNewServer sera mise à jour en true. Nous pouvons voir que le bouton devient cliquable.

Ainsi, en utilisant la liaison de propriété, nous avons pu lier dynamiquement la propriété disabled de l'élément HTML du bouton à la propriété allowNewServer de notre composant. Cela nous a permis de désactiver ou d'activer le bouton en fonction de la valeur de allowNewServer, en temps réel.

En résumé, la liaison de propriété est un outil puissant d'Angular qui permet de lier dynamiquement les propriétés des éléments HTML à des propriétés de notre composant. Cela nous permet de rendre notre application plus interactive et plus flexible, en lui permettant de réagir aux changements de manière dynamique.