โครงสร้าง if ใน Angular

เงื่อนไขใน Angular สามารถสร้างได้ด้วยโครงสร้างพิเศษ @if. โครงสร้างนี้ช่วยให้สามารถแสดงหรือซ่อนบล็อกโค้ดตามเงื่อนไขได้ มาดูวิธีการใช้งานกัน

สมมติว่าเรามีตัวแปรต่อไปนี้:

app/app.component.tsexport class AppComponent {
  public isAdmin: boolean = true;
}

ลองสร้าง div ที่จะแสดงเมื่อตัวแปรนี้มีค่าเป็น true:

app/app.component.html@if (isAdmin) {
  <div>
    text
  </div>
}

ลองทำให้ div ถูกแสดงเมื่อตัวแปรของเรามีค่าเป็น false:

app/app.component.html@if (!isAdmin) {
  <div>
    text
  </div>
}