# Two-Way Binding — Angular Fundamentals: Components, Signals and Routing

Source: https://www.skillbyai.com/en/angular/ng-two-way-binding

> Keep form inputs and component fields in sync with two-way binding and ngModel.

## [(ngModel)]

The "banana in a box" syntax `[()]` keeps a class field and an input's value in sync in both directions.

```html
<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>
```

## Requires FormsModule

`ngModel` lives in `FormsModule` — a standalone component must add it to its `imports` array before `[(ngModel)]` will work.

## It's sugar

`[(ngModel)]="x"` is shorthand for `[ngModel]="x" (ngModelChange)="x = $event"` — property binding plus event binding.