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

sidali

Sid Ali BENTIFRAOUINE

Posted on September 20, 2022

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
  ],
  [...]
})
Enter fullscreen mode Exit fullscreen mode

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

<h1>{{ title }}</h1>
<input [(ngModel)]="title" />
Enter fullscreen mode Exit fullscreen mode

Image description

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

💖 💪 🙅 🚩
sidali
Sid Ali BENTIFRAOUINE

Posted on September 20, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related