Angular / HTML : comment appliquer un booléen (boolean) à une case à cocher à vérifier ?
Le framework Angular permet de créer entièrement le front-end d'un site internet avec le langage JavaScript. Dans sa syntaxe, il enrichit les balises HTML en fournissant ses propres attributs et structures de contrôles. On peut ainsi lier un formulaire directement à un objet du modèle, dont la valeur des attributs va évoluer en fonction de ce que saisit l'utilisateur. On peut ainsi le faire pour une case à cocher.
Si dans votre classe du modèle, vous avez un booléen, il est possible de le lier à une case à cocher située dans un formulaire affiché par un composant. Pour cela, vous devez utiliser l'attribut "[checked]". Il correspond à l'attribut HTML "checked" qui indique si une case est cochée. Il est cependant écrit entre des crochets afin que le framework le modifie pour le lier à l'attribut qui sera passé en valeur.
La valeur de l'attribut "estCoche" dans cet exemple va directement changer de valeur en fonction du fait de cocher ou de décocher la case. Si vous cochez la case, l'attribut vaudra true, sinon false. Il est important de déclarer cet attribut comme booléen. Si ce n'est pas le cas, vous devrez adapter le code. Par exemple, pour une chaîne de caractères, vous devez écrire "monObjet.estCoche == 'true' dans l'attribut "[checked]" pour que cela fonctionne. Vous pouvez ensuite détecter ces changements grâce aux méthodes fournies par le framework, et exécuter du code afin d'adapter par exemple l'affichage de votre formulaire.