数据绑定是ANGLE中的一个核心概念，它允许定义组件和DOM之间的通信，这使得定义交互应用程序变得非常容易，而不必担心数据的推送和拉取。数据绑定有四种形式，它们在数据流动的方式上有所不同。

<$>[注]这篇文章涵盖了角度2及以上<$>

从组件到DOM

插值：{{ value }}

这将添加组件的属性值：

1<li>Name: {{ user.name }}</li>
2<li>Email: {{ user.email }}</li>

属性绑定：[Property]=Value

通过属性绑定，值从组件传递到指定的属性，该属性通常可以是一个简单的html属性：

1<input type="email" [value]="user.email">

下面是另外两个示例，一个是在组件中应用seltedColor值中的背景色，另一个是在isSelected的计算结果为True时应用类名：

1<div [style.background-color]="selectedColor">

从DOM到组件

事件绑定：(Event)=函数

当特定的DOM事件发生时(例如：Click、Change、KeyUp)，调用组件中指定的方法。在下面的示例中，当单击按钮时将调用组件中的cookPoaters()方法：

1<button (click)="cookPotato()"></button>

双向

双向数据绑定：[(NgModel)]=Value

在框语法中使用所谓的香蕉，双向数据绑定允许数据流双向流动。在此示例中，将使用user.mail数据属性作为输入的值，但如果用户更改该值，则组件属性将自动更新为新值：

1<input type="email" [(ngModel)]="user.email">