Angular - 2.15 Proprieté Binding VS interpolation de chaine

Dans le dernier cours, nous avons appris à lier les propriétés. Maintenant, si nous avions le cas d'utilisation que nous voulions également afficher la valeur actuelle de allowNewServer, nous pourrions bien sûr utiliser l'interpolation de chaîne pour simplement afficher "allowNewServer". De plus, un booléen peut également être coulé dans une chaîne. Donc maintenant, nous obtenons "false" ici et après deux secondes, vous voyez que cela change en "true" parce que nous l'avons changé dans le code.

Maintenant, c'est l'un des cas ici où vous pouvez facilement utiliser la liaison de propriété au lieu de l'interpolation de chaîne. Vous pouvez donc simplement lier la propriété de cet élément, la propriété innerText et la rendre égale à "allowNewServer". Maintenant, je peux supprimer l'interpolation de chaîne ici à l'intérieur du texte.

Et bien qu'il puisse sembler vide maintenant alors que nous avons défini le texte interne, nous obtenons le même comportement qu'avant parce que la propriété innerText de l'élément est juste ce qui se trouve entre la balise d'ouverture et de fermeture. Donc, dans ce cas, nous avons pu facilement remplacer la chaîne de caractères et l'interpolation par la liaison de propriété.

Quand faut-il utiliser l'une ou l'autre des deux méthodes ? Eh bien, en gros, si vous voulez afficher quelque chose dans votre modèle y implémenter du texte, utilisez l'interpolation de chaînes. Si vous voulez modifier une propriété, que ce soit celle d'un élément HTML ou comme vous l'apprendrez plus tard d'une directive ou d'un composant, vous utilisez généralement la liaison de propriété. C'est ainsi que vous pouvez le différencier et vous aurez un aperçu de cela une fois que vous aurez travaillé sur le projet du cours et ainsi de suite.

Il est donc important de ne pas mélanger la liaison de propriété et l'interpolation de chaîne. Vous pouvez remarquer qu'ici nous avons désactivé des égalités et ensuite nous avons des guillemets et ensuite directement le nom de notre propriété. Il n'y a pas d'accolades entre ces guillemets et il ne devrait pas y en avoir parce que cela va casser l'application. Cela ne fonctionnera pas entre les guillemets de la liaison de propriété. Vous pouvez et vous devez déjà écrire du code TypeScript, c'est-à-dire une expression TypeScript qui renverra la valeur attendue par cette propriété.

Ainsi, on utilise "disabled" pour désactiver une expression qui renvoie vrai ou faux. Donc, tout comme pour l'interpolation de chaîne, vous pouvez également appeler une méthode à cet endroit mais vous ne devez pas y ajouter d'accolades. Une fois que ça a l'air propre, on utilise simplement un attribut HTML. Cette syntaxe ici est une syntaxe reconnue par Angular. Vous devez écrire du code TypeScript parce qu'encore une fois, toute cette expression est évaluée par Angular, le mélange de l'interpolation de chaîne va le casser.

L'interpolation de chaînes ne fonctionne que dans un modèle normal, pas dans une autre expression de ce modèle, pas dans une liaison de propriété ou quelque chose comme ça. Maintenant que nous avons vu la liaison de propriété, voyons comment nous pouvons réagir aux événements.

Dans Angular, nous pouvons utiliser la directive "ng-click" pour réagir aux clics sur un élément HTML. Vous pouvez l'utiliser de cette manière: dans l'élément HTML, vous ajoutez la directive "ng-click" et vous la liez à une méthode de votre composant qui sera appelée lorsque l'utilisateur clique sur cet élément.

Par exemple, si vous avez un bouton pour ajouter un élément à une liste, vous pouvez ajouter la directive "ng-click" à ce bouton et la lier à une méthode "ajouterElement()" de votre composant. Ainsi, lorsque l'utilisateur clique sur ce bouton, la méthode "ajouterElement()" sera appelée et vous pourrez ajouter un nouvel élément à votre liste.

Il existe également d'autres directives pour réagir à d'autres types d'événements, tels que la directive "ng-submit" pour réagir à la soumission d'un formulaire.

En conclusion, la liaison de propriété et les événements sont des concepts importants en Angular. La liaison de propriété vous permet de lier les propriétés d'un élément HTML à des propriétés de votre composant, ce qui vous permet de créer des applications dynamiques et réactives. Les événements vous permettent de réagir aux actions de l'utilisateur, telles que les clics et les soumissions de formulaire. En comprenant ces concepts, vous pourrez créer des applications plus puissantes et plus interactives en Angular.