Débuter avec Angular 14: #5 Le two way data binding ou le banana in the box 🍌➡️📦

S'il y a bien un truc que j'avais adoré lorsque j'ai appris Angular pour la premiere fois (c'était en 2016 avec Angular 2) c'est le fait de pouvoir faire de Data/Event binding en meme temps.

Tu vas me dire, oui mais Sid Ali, dans quelle exemple pourrais-je avoir besoin.

Petite enigme alors:
Je te permets de m'écrire, je t'écris ce que tu m'écris

Je suis un...Input!

Une petite configuration est de rigueur avant de pouvoir utiliser cette magie, il te faut modifier le fichier app.module.ts pour y ajouter le FormsModule

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Maintenant que c'est fait, on peut modifier notre template app.component.html

<h1>{{ title }}</h1>
<input [(ngModel)]="title" />

GIF

Me mettrai un petit dessin explicatif demain in-chat-là, sinon après demain (des empire se sont construire avec la procrastination)
Il est l'heure d'aller me coucher