DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sid Ali BENTIFRAOUINE
Sid Ali BENTIFRAOUINE

Posted on

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

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await