Các chỉ thị thường dùng trong view 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 chuyển.

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

• Chỉ thị *ngif trong angular
• Chỉ thị *ngFor trong angular
• Chỉ thị ngSwitch trong Angular

Chỉ thị *ngif trong angular

Đây là lệnh quan trọng, nó giúp bạn ẩn hiện 1 tag trong view theo điều kiện nào đó.

Sử dụng lệnh này bằng cách ghi *ngIf=”Điềukiện” trong 1 tag của view. Lệnh tạo hoặc 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>

Code trong component để định nghĩa các biến cho view:

//app.component.ts 
export class AppComponent {   
      diem = 7;   
      phai = true; 
}

Chỉ thị *ngFor trong angular

Đây là lệnh lặp và dùng rất thường xuyên trong view. Khi cần hiện danh sách sản phẩm, danh sách tin, user, danh sách khách hàng… thì nhớ lệnh này nhé.

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. Xem ví  dụ để biết cách dùng:

Code trong view dùng *ngFor như sau:

<!-- app.component.html -->
<select>
  <option *ngFor='let t of thu' > {{t}} </option>
</select>

Code trong component định nghĩa mảng dữ liệu để ngFor sử dụng:

//app.component.ts
 thu=['Thứ 2','Thứ 3','Thứ 4','Thứ 5','Thứ 6','Thứ 7','Chủ nhật'];

Chỉ thị ngSwitch trong Angular

Đây là chỉ thị rẽ nhánh, tương đương nhiều lệnh *ngIf ghép lại với nhau. Ví dụ triển khai code cho lệnh này trong view của Angular như sau:

//app.component.ts
<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>

Bài các chỉ thị thường dùng trong Angular chỉ đề cập về cách sử dụng một vài lệnh cơ bản và thường dùng nhất trong view của Angular. Các chỉ thị khác sẽ được đề cập sau.

Muốn thực tập thêm về Angular thì bạn xem ở đậy Thực tập Angular hoặc ở đây https://angular.io/guide/structural-directives