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 view dễ dàng, uyển chuyển hơn. Bài viết này sẽ đề cập hướng dẫn bạn các chỉ thị thường dùng nhất là ngIf, ngFor và ngSwitch…. Các chỉ thị này nằm trong module common của Angular , cho nên khi sử dụng thì nhớ import CommonModule vào.

Chỉ thị *ngif trong Angular

Đây là chỉ thị giúp hiện tag theo theo điều kiện. Cụ thể 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ụ Trong component có định nghĩa các biến cho view:

//app.component.ts 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';  
@Component({
  selector: 'app-root', standalone: true,
  imports: [ CommonModule ],
  templateUrl: './app.component.html', styleUrl: './app.component.css'
})
export class AppComponent {
  diem = 7;   
  phai = true; 
}

Trong view, hiển thị thông tin theo điều kiện như sau:

<!-- 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>

Kết quả

Chỉ thị *ngFor trong angular

Đây là chỉ thị lặp qua một mảng và được 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, danh sách 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:

Trong component định nghĩa biến để ngFor sử dụng:

//app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';  
@Component({
  selector: 'app-root', standalone: true,
  imports: [ CommonModule ],
  templateUrl: './app.component.html', styleUrl: './app.component.css'
})
export class AppComponent {
  thu=['Thứ 2','Thứ 3','Thứ 4','Thứ 5','Thứ 6','Thứ 7','Chủ nhật'];
}

Trong view, lặp qua mảng với ngFor và xem kết quả

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

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. Muốn đọc thêm mời bạn xem ở đậy https://angular.io/guide/structural-directives