Two-Way Binding [( )]

Relax. We'll talk through this in plain words — no textbook voice.

Two-Way Data Binding [(...)] (the "Banana in a Box" syntax) combines property binding and event binding into one. It's most commonly used with form inputs via the [(ngModel)] directive.

⚠️ Important: FormsModule needs to be imported.

typescript

// app.module.ts
import { FormsModule } from '@angular/forms';

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

// component.html
<input [(ngModel)]="username" type="text">
<p>Hello, {{ username }}!</p>

// component.ts
export class MyComponent {
  username = 'World';
}

You should see

(As soon as you type into the input box, the text below instantly updates to 'Hello, [typed text]!')