En prévision de la formation sur angular 5, prévue en fin avril 2018, dans la NG-ACADEMY, j’ai décidé de me pencher sur un des concepts de base d’angular: le data binding.

Il existe plusieurs façons de lier des données dans Angular: interpolation, liaison unidirectionnelle (one way binding), liaison bidirectionnelle(two way binding) et liaison d’événement(event binding). Ces quatre types de data binding étaient déjà disponibles dans Angular 1, mais maintenant dans Angular 2, la syntaxe a un peu changé. Dans ce post, je voudrais partager avec vous les différences qui existent entre la syntaxe d’ Angular 2 et Angular 1.

 

Interpolation

L’interpolation est le moyen le plus simple et le plus connu de liaison de données. En angulaire 1, il ressemblait à ceci:

Dans Angular 2, nous pouvons toujours utiliser les accolades, mais nous pouvons omettre vm, car nous avons déjà le contexte. Pas vraiment une grande différence, mais on gagne tout de même quelques touches de frappes ici.

One way binding

Dans Angular 1 nous utilisions la liaison unidirectionnelle avec ng-bind. La syntaxe était de la forme:

Dans Angular 2, nous pouvons utiliser des crochets entourant la propriété à laquelle nous voulons nous lier.

Cela peut sembler un peu étrange au début, mais c’est certainement un code HTML valide. En fait, nous pouvons prendre n’importe quelle propriété HTML, comme innerText, l’emboîter dans des crochets et ensuite le lier à un modèle. Cela pourrait par exemple également fonctionner sur les propriétés CSS:

Two way binding

Le cas d’utilisation le plus courant de la liaison bidirectionnelle dans Angular est l’utilisation sur un champ de saisie ou tout autre élément de formulaire. Lorsque nous tapons quelque chose dans l’entrée d’un côté, la valeur est transmise au contrôleur, pareil dans le sens inverse. C’est à dire du controleur au template html. Dans Angular 1, nous utiliserions la directive ng-model sur l’élément et le lierons à la valeur:

Dans Angular 2, nous avons également une directive spéciale appelée ngModel.

Mais remarquez comment la syntaxe est juste un peu différente. Nous utilisons les crochets parce que c’est une propriété, mais nous utilisons aussi la parenthèse. Cette syntaxe est appelée Banana in a Box ([()]). Quand vous voyez cette syntaxe, c’est que la liaison bidirectionnelle est en action.

De plus, dans Angular 2 la convention de diviser les mots avec des tirets a été abandonnée et utilisent à la place camelcase (ng-repeat vs ngFor, ng-if vs ngIf etc.).

Event binding

Vous pouvez effectuer une liaison d’événement avec tout événement HTML valide disponible, tel que cliquer, mettre au point ou flouter. Dans Angular 1, vous devez disposer de directives intégrées pour utiliser la liaison d’événements. Par exemple, pour lier à un clic, on utiliserait:

Dans Angular 2, nous pouvons simplement prendre la même propriété que sur l’élément HTML (cliquez dans l’exemple précédent) et l’entourer de parenthèses. Donc, avec les propriétés, nous utilisons des crochets, mais avec des événements, nous utilisons des parenthèses:

Je tiens à souligner qu’il n’y a pas de directives d’événements comme click dans Angular 2, et qu’il s’agit en fait d’événements d’éléments HTML. Pour cette raison, Angular a largué des tonnes de directives (comme ng-click, ng-blur, ng-focus, etc.) et je pense que c’est un excellent choix.