Angular提供了一些内建的指令，可以作为属性添加给HTML元素，以动态控制其行为。
一、内建指令
a) *ngIf，可以根据条件来显示或隐藏HTML元素。
<div *ngIf='a>b'>show</div>，只有在a>b的时候才会显示这个div。
b)*ngSwitchCase，可以根据不同的条件，控制对应的HTML元素的显示。
<div[ngSwitch]='myVar'>
<div *ngSwitchCase="'a'">vara</div>
<div *ngSwitchCase="'b'">varb</div>
<div *ngSwitchDefault>vardefault</div>
<div *ngSwitchCase="'b'">varb2</div>
</div>
没有匹配的条件时，显示*ngSwitchDefault。如果myVar=’b’，对应的两个div都会显示，放在* ngSwitchDefault也不会受影响。
c)ngStyle，用来控制CSS样式。
<span[ngStyle]="{color: theColor}"[style.font-size.px]="fontSize">
red text
</span>
这儿的theColor和fontSize为ts代码中的属性。frontSize必须指定单位，如[style.font-size.px]、[style.font-size.em]等。
d) Indexof ngFor
<div*ngFor="let c of cities;let num=index">
<div> {{num+1}}-{{c}}</div>
</div>
定义let num=index后，num就可记录循环次数了。
e) ngNonBindable
模型绑定使用{{}}的语法，如果需要输出{{}}这样的文本，可以使用ngNonBindable。
<divngNonBindable>{{cities[0]}}</div>
二、Form
关于在Angular程序的Form，主要用到三个对象，FormControls用于处理用户输入，Validators用于输入校验，Observers用于检测数据变化并响应输入动作。
a)FormControl和FormGroup
FormControl代表输入框的一个最小单元，然后可以用FormGroup来整合一个Form表单所有的FormControl。
创建Form的方式有两种，可以在app.module中引入FormsModule或ReactiveFormsModule，要使用Form的功能，必须引入其一。
FormsModule包含的指令为ngModel和NgForm，ReactiveFormsModule包含的指令为formControl和ngFormGroup。
b) 比如创建这样一个简单的Form
html为：
这里使用了ngForm，属于第一种方式FormControl，定义了FormGroup以及(ngSubmit)输出，并把ngForm绑定到了#f变量，所以onSubmit传递的参数为f.Value，就是当前的FormGroup，点击提交，拿到的对象为：Object { sku: "xxx" }。
<input type="text"
id="skuInput"
placeholder="SKU"
name="sku" ngModel>
ngModel是NgModel的选择器，可以使用ngModel=”XXX”的形式指定属性值，但这里没有指定值，则采用的是单向绑定的方式，而且通过在input放置ngModel，也创建了一个FormControl，当前只有一个输入单元name=”sku”。这个FormControl会自动被添加到父元素也就是<form>上。
c) 如果要为已经存在的FormGroup或FormControls绑定Form单元，可以使用ReactiveFormsModule的FormBuilder。
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'sku': ['ABC123']
});
}
这段代码使用了FormBuilder，然后在html模板使用[formGroup]。
学习资料：The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda