# Data Binding

## 4 forms of data binding markup

Each form has a direction—to the DOM, from the DOM, or in both directions.

![Data Binding](https://angular.io/generated/images/guide/architecture/databinding.png)

```markup
<li>{{hero.name}}</li> <!-- interpolation -->

<app-hero-detail [hero]="selectedHero"></app-hero-detail> <!-- property binding -->
<li (click)="selectHero(hero)"></li> <!-- event binding -->

<input [(ngModel)]="hero.name"> <!-- 2 ways data binding -->
```

## two-way binding <a href="#id-2waydatabinding" id="id-2waydatabinding"></a>

You often want to both display a data property and update that property when the user makes changes.

In two-way binding, a data property value flows to the input box from the component as with property binding. The user's changes also flow back to the component, resetting the property to the latest value, as with event binding.

Angular processes all data bindings once per JavaScript event cycle, from the root of the application component tree through all child components.

> two-way binding = property binding + event binding

```markup
<input [(ngModel)]="hero.name">

<!-- equals -->

<input [value]="hero.name" (input)="hero.name=$event.target.value">
```

![Data Binding](https://angular.io/generated/images/guide/architecture/component-databinding.png)

That `ngModel` directive hides these onerous details behind its own `ngModel` input and `ngModelChange` output properties.

```markup
<input [ngModel]="currentHero.name" (ngModelChange)="currentHero.name=$event">
```

Although[`ngModel`](https://angular.io/api/forms/NgModel)is a valid Angular directive, it isn't available by default. It belongs to the optional[`FormsModule`](https://angular.io/api/forms/FormsModule)and you must opt-in to using it.

The `[(ngModel)]` syntax can only set a data-bound property. If you need to do something more or something different, you can write the expanded form.

The following contrived example forces the input value to uppercase:

```markup
<input  [ngModel]="currentHero.name" (ngModelChange)="setUppercaseName($event)">
```

## Customized two-way binding

The `[(x)]` syntax is easy to demonstrate when the element has a **settable property** called `x` and a corresponding **event** named `xChange`. Here's a SizerComponent that fits the pattern. It has a size value property and a companion sizeChange event:

```javascript
src/app/sizer.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-sizer',
  template: `
  <div>
    <button (click)="dec()" title="smaller">-</button>
    <button (click)="inc()" title="bigger">+</button>
    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
  </div>`
})
export class SizerComponent {
  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}
```

```markup
src/app/app.component.html (two-way-1)

<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
```

The two-way binding syntax is really just syntactic sugar for a property binding and an event binding. Angular desugars the SizerComponent binding into this:

```markup
src/app/app.component.html (two-way-2)

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
```

It would be convenient to use two-way binding with HTML form elements like `<input>` and `<select>`. However, no native HTML element follows the `x` value and `xChange` event pattern.

Fortunately, the Angular **NgModel** directive is a bridge that enables two-way binding to form elements.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fancyloves.gitbook.io/frontendtech/angularjs/bindings/data-binding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.