component属性在两个花括号之间指定。
Angular将用与该组件属性关联的字符串值替换该组件属性。
根据需要可以在不同的地方使用。
Angular将插值转换为属性绑定。

Angular还允许我们配置插值定界符，并使用我们选择的内容代替两个花括号。
可以使用组件元数据中的插值选项来完成此操作。

模板表达式

模板表达式位于两个大括号内，并且它们产生一个值。
Angular将执行该表达式，然后将特定的表达式分配给绑定目标的属性，例如HTML元素，组件或者指令。

注意：插值括号之间的2 * 2是模板表达式。

属性绑定

在"属性绑定"中，值从组件的属性流入目标元素的属性。
因此，属性绑定不能用于从目标元素读取或者提取数据或者调用属于目标元素的方法。
元素引发的事件可以通过事件绑定进行确认，这将在本文的后面介绍。

通常，可以说将使用属性绑定将组件属性值设置为元素属性。

例子：

<h1>{{title}}</h1>

Learn <b> {{course}}
</b> with theitroad.
2 * 2 = {{2 * 2}}

<div><img src="{{image}}"></div>

在上面的示例中，图像元素的src属性绑定到组件的图像属性。

属性绑定和插值

如果我们已经注意到，可以看到插值和属性绑定可以互换使用。
看一下下面给出的示例对：

export class AppComponent {
  title = 'Databinding';
  course ='Angular';
  image = 'paste the url here'
}

请注意，当需要将元素属性设置为非字符串数据值时，必须使用属性绑定而不是插值。

事件绑定

使用事件绑定功能，我们可以侦听某些事件，例如鼠标移动，按键，单击等。
在Angular中，可以通过在等号(=)左侧的常规方括号内指定目标事件名称来实现事件绑定，以及右引号("")内的模板语句。

例子：

<h1>Property binding</h1>

<div><img [src]="image"></div>

上例中的" click"是目标事件的名称，" goBack()"是模板的语句。

每当发生事件绑定时，Angular都会为目标事件设置事件处理程序。
当该特定事件引发时，模板语句由处理程序执行。
通常，接收者会涉及执行响应事件的操作的模板语句。
其中绑定用于传达有关事件的信息。
信息的这些数据值包括事件字符串，对象等。

双向绑定

Angular允许双向数据绑定，这将允许应用程序在两个方向上共享数据，例如：从组件到模板，反之亦然。
这样可以确保应用程序中存在的模型和视图始终保持同步。
双向数据绑定将执行两件事，例如：设置元素属性和侦听元素更改事件。

双向绑定的语法为 [( )}。
如我们所见，它是属性绑定语法的组合，例如：[]和事件绑定语法()。
根据Angular的说法，此语法类似于"盒子里的香蕉"。

例子：

<h2>Interpolation</h2>

<div><img src="{{image}}"></div>

<h2>Property binding</h2>

<div><img [src]="image"></div>

执行此代码时，我们将看到对模型或者视图的更改将导致对相应视图和模型的更改。
看一下下面的图片，该图片从视图中将类名称从" Python"更改为" Pytho"：