@if làm gì trong template Angular và nó thay thế *ngIf như thế nào?

@if là khối control flow có sẵn, chỉ render nội dung khi điều kiện đúng. Nó là một phần cú pháp template nên bạn không cần import gì. Nó thay thế directive *ngIf cũ, vốn phải thêm NgIf vào imports.

@if (user(); as u) {
  <p>Hello {{ u.name }}</p>
} @else if (loading()) {
  <p>Loading...</p>
} @else {
  <p>Please sign in</p>
}

So với *ngIf:

• @else if và @else là một phần của cú pháp, nên không còn phải dùng else kèm template reference variable.
• as giữ giá trị đã tính trong một biến cục bộ.
• Compiler xử lý trực tiếp, nên type checking tốt hơn và ít code chạy lúc runtime hơn.

Code mới nên dùng @if. Bạn vẫn sẽ gặp *ngIf ở các dự án cũ, và có schematic (ng generate @angular/core:control-flow) để migrate tự động.

Với template mới, hãy ưu tiên @if.