在Angular中，我们可以使用两种方式来绑定数据，一种是使用插值表达式{{ xxx }}，另一种是使用属性绑定[name]=xxx。

这两种方式的主要区别是：{{ xxx }}是一种单向数据绑定，只能将组件中的数据渲染到模板中，而不能将模板中的数据反向传回组件；而[name]=xxx是一种双向数据绑定，不仅能将组件中的数据渲染到模板中，还能将模板中的数据反向传回组件。

下面是一个示例，演示如何使用这两种方式来绑定数据：

组件中的代码：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    
{{ name }}
    
  `
})
export class AppComponent {
  name: string = 'John Doe';
}

模板中的代码：

  Name:
  

在上面的示例中，我们使用插值表达式{{ name }}来将组件中的name数据渲染到模板中的h1标签中，同时使用属性绑定[name]=name和双向数据绑定[(ngModel)]="name"来将模板中的数据同步到组件中的name变量中。当在输入框中输入数据时，模板中的数据会自动更新组件中的name变量，从而实现了双向数据绑定的效果。