Các chỉ thị thường dùng trong view Angular giúp cho việc hiển thị dữ liệu trong phần view của component một cách dễ dàng, uyển uyển.
Chỉ thị *ngif trong angular
Sử dụng chị thị *ngIf bằng cách ghi *ngIf=”Điềukiện” trong 1 tag của view sẽ giúp tạo/không tạo tag đó trong DOM tùy theo điều kiện đúng hay sai.. Ví dụ:
<!-- app.component.html -->
<p> Phái:
<span *ngIf="phai==true">Nam</span>
<span *ngIf="phai==false">Nữ</span> </p>
<p> Kết quả:
<span *ngIf="diem>=5">Đậu</span>
<span *ngIf="diem<5">Rớt</span>
</p>
//app.component.ts
export class AppComponent {
diem= 7;
phai=true;
}
Chỉ thị *ngFor trong angular
Sử dụng chỉ thị *ngFor trong 1 tag của view sẽ giúp tạo ra tag đó nhiều lần trong DOM. Ví dụ:
<!-- app.component.html -->
<select>
<option *ngFor="let t of thu"> {{t}} </option>
</select>
//app.component.ts
export class AppComponent {
thu=['Thứ 2','Thứ 3','Thứ 4','Thứ 5','Thứ 6','Thứ 7','Chủ nhật'];
}
Chỉ thị ngSwitch
Đây là chỉ thị rẽ nhánh, tương đương nhiều lệnh *ngIf
<p [ngSwitch]="true">Xếp loại:
<b *ngSwitchCase="diem>=9">Giỏi</b>
<b *ngSwitchCase="9>diem && diem>=7">Khá</b>
<b *ngSwitchCase="7>diem && diem>=5">Trung bình</b>
<b *ngSwitchDefault>Yếu</b>
</p>