Các chỉ thị thường dùng trong Angular

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>

ngStyle

ngClass