Data Binding

• Enables data to flow from the component to template and vice-versa
• Includes interpolation, property binding, event binding, and two-way binding (property binding and event binding combined)
• The binding syntax has expanded but the result is a much smaller framework footprint

We can think of it in this way. If something happens in the class, it uses Property Binding to let the Templates know. And if something happens in the template, it uses Event Binding to let the class know.

<h1>{{title}}</h1>
<p>{{body}}</p>

<experiment *ngFor="let e of experiments" [experiment]="e"></experiment>

<div>
    <h2 class="text-error">Experiments: {{message}}</h2>
    <form class="form-inline">
        <input type="text" [(ngModel)]="message" placeholder="Message">
        <button type=“submit" (click)="updateMessage(message)">
            Update Message
        </button>
    </form>
</div>

---

Children

1. Event Binding
2. Property Binding
3. String Interpolation
4. Two-way Binding