Kontrol Akışı - @if

Kullanıcıya ekranda neyin gösterileceğine karar vermek, uygulama geliştirmede yaygın bir görevdir. Çoğu zaman bu karar, koşullar kullanılarak programatik olarak verilir.

Şablonlarda koşullu gösterimi ifade etmek için Angular, @if şablon sözdizimini kullanır.

Bu aktivitede, şablonlarda koşullu ifadelerin nasıl kullanılacağını öğreneceksiniz.

Bir şablonda öğelerin koşullu gösterimini sağlayan sözdizimi @if'tir.

İşte bir bileşende @if sözdiziminin nasıl kullanılacağına dair bir örnek:

@Component({
  ...
  template: `
    @if (isLoggedIn) {
      <p>Welcome back, Friend!</p>
    }
  `,
})
export class App {
  isLoggedIn = true;
}

Dikkat edilmesi gereken iki nokta:

• if için @ öneki vardır çünkü bu, Angular şablon sözdizimi adı verilen özel bir sözdizimi türüdür
• v16 ve daha eski sürümleri kullanan uygulamalar için lütfen daha fazla bilgi edinmek üzere NgIf için Angular belgelerine bakın.

1. isServerRunning adlı bir özellik oluşturun

   App sınıfında, isServerRunning adında bir boolean özellik ekleyin ve başlangıç değerini true olarak ayarlayın.

2. Şablonda @if kullanın

   isServerRunning değeri true ise Yes, the server is running mesajını göstermek için şablonu güncelleyin.

3. Şablonda @else kullanın

   Angular artık @else sözdizimi ile else durumunu tanımlamak için yerel şablon sözdizimini desteklemektedir. Else durumu olarak No, the server is not running mesajını göstermek için şablonu güncelleyin.

   İşte bir örnek:

   template: `
   @if (isServerRunning) {
     ...
   } @else {
     ...
   }
   `;

   Eksik işaretlemeyi doldurmak için kodunuzu ekleyin.

Bu tür bir işlevselliğe koşullu kontrol akışı denir. Sırada, bir şablonda öğelerin nasıl tekrarlanacağını öğreneceksiniz.