# Two-Way Binding — Angular

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

> Combine property and event binding with 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.