HTML绑定

形式：{{ 变量名 }}

1. {{}}内部可以是

• 算数运算
• 比较运算
• 逻辑运算
• 三目运算
• 调用函数

2. {{}}内部不可以是

• 创建对象：不可以new
• JSON序列化

属性绑定

形式1：[属性名]=“变量名”
形式2：属性名=“{{变量名}}”

<div [title]="uname">用户名：{{ uname }}</div>
<div title="{{uname}}">用户名：{{ uname }}</div>

事件绑定

形式： (click)=“方法名()”

指令

（1）*ngFor

（2）*ngIf

<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

（3）[ngStyle]

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

（4）[ngClass]

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

（5）[ngSwitch]

<container-element [ngSwitch]="switch_expression">
   <some-element *ngSwitchCase="match_expression_1">...</some-element>
...
   <some-element *ngSwitchDefault>...</some-element>
</container-element>

（6）双向数据绑定 [(ngModel)]

<input [(ngModel)]="name">

过滤器

1. 自定义管道

ng g pipe 管道名

2. 预定义管道