Để hiển thị một phần view (template) dựa trên một điều kiện, chúng ta sử dụng directive *ngIf trong Angular. Cú pháp *ngIf="expression" giúp chúng ta kiểm soát việc hiển thị hoặc ẩn một phần của template tùy thuộc vào giá trị của biểu thức expression.

Dưới đây là ví dụ mô tả cách sử dụng *ngIf:

@Component({
  selector: "app-hello",
  template: `
    <h2>Hello there!</h2>
    <h3>Your name: {{ user.name }}</h3>
    <p>Your name: {{ user.age }}</p>
    <div *ngIf="user.age >= 13">You may view PG-13 content</div>
  `,
})
export class HelloComponent {
  user = {
    name: "John Doe",
    age: 29,
  };
}

Trong đoạn mã trên, div sẽ chỉ được hiển thị nếu điều kiện user.age >= 13 là đúng (Truthy). Nếu điều kiện là Sai (Falsy), div sẽ không được hiển thị.

Đối với trường hợp muốn sử dụng cả if-else, bạn có thể sử dụng cú pháp else hoặc ng-template. Dưới đây là ví dụ sử dụng else:

@Component({
  selector: "app-hello",
  template: `
    <h2>Hello there!</h2>
    <h3>Your name: {{ user.name }}</h3>
    <p>Your name: {{ user.age }}</p>
    <div *ngIf="user.age >= 13; else noPG13">You may view PG-13 content</div>
    <ng-template #noPG13>
      <div>You cannot view PG-13 content</div>
    </ng-template>
  `,
})
export class HelloComponent {
  user = {
    name: "John Doe",
    age: 10,
  };
}

Trong trường hợp này, nếu điều kiện user.age >= 13 là Sai, template sẽ hiển thị nội dung trong block else được đặt tên là noPG13.

Ng-template trong Angular

Ng-template trong Angular được sử dụng để tạo các template mà không hiển thị chúng trực tiếp trong view. Nó là một phần quan trọng của các directive như *ngIf, *ngFor.

Cú pháp với ng-template giúp chia thành hai phần: một phần chứa điều kiện cần kiểm tra và một phần chứa nội dung cần hiển thị dựa trên điều kiện đó.

Ví dụ dưới đây sử dụng ng-template cùng với ngIf:

@Component({
  selector: "app-hello",
  template: `
    <h2>Hello there!</h2>
    <h3>Your name: {{ user.name }}</h3>
    <p>Your name: {{ user.age }}</p>
    <ng-template [ngIf]="user.age >= 13" [ngIfElse]="noPG13">
      <div>You may view PG-13 content</div>
    </ng-template>
    <ng-template #noPG13>
      <div>You cannot view PG-13 content</div>
    </ng-template>
  `,
})
export class HelloComponent {
  user = {
    name: "John Doe",
    age: 10,
  };
}

Trong đoạn mã này, [ngIf]="user.age >= 13" kiểm tra điều kiện nếu user.age lớn hơn hoặc bằng 13. Nếu điều kiện đúng, ng-template sẽ hiển thị nội dung trong block đầu tiên. Ngược lại, [ngIfElse]="noPG13" chỉ định một template thay thế noPG13 nếu điều kiện sai.

Dưới đây là template syntax tương đương khi không sử dụng cú pháp *:

<ng-template [ngIf]="user.age >= 13" [ngIfElse]="noPG13">
  <div>You may view PG-13 content</div>
</ng-template>
<ng-template #noPG13>
  <div>You cannot view PG-13 content</div>
</ng-template>