Angular'da *ngIf ve *ngFor Directive Kullanımı

IDE tarafinda: VS Code tarafinda *ngIf ve *ngFor icin Angular Language Service hata kontrolu yapiyor; item degiskeninin tipi otomatik cikariliyor. Formatter Ctrl+Shift+F ile HTML template'i guzelce hizaliyor.

Merhaba arkadaşlar, bu makalemizde Angular'ın template içerisinde en çok kullandığımız iki yapısal directive'i inceliyor olacağız: *ngIf ve *ngFor. Bu ikili sayesinde HTML'imizi koşullara göre değiştirebiliyor, liste şeklindeki verileri ekrana rahatça basabiliyoruz.

Directive Nedir?
Directive, Angular'ın HTML'e ekstra özellikler kazandıran yapısıdır. İki çeşidi var: yapısal (structural) directive'ler DOM'u şekillendirirler (örneğin bir elementi ekleyip kaldırabilirler) ve öznitelik (attribute) directive'ler bir elementin görünümünü ya da davranışını değiştirirler. Bu makalede yapısal olanlara odaklanacağız.

*ngIf — Koşullu Render
*ngIf, kendisine verilen ifade true ise elementi DOM'a ekler, false ise DOM'dan komple kaldırır. Bu önemli bir ayrıntı: sadece gizlemek (display: none) değil, elementi hiç oluşturmaz. Yani performans açısından da güzel bir davranış.

<div *ngIf="kullaniciGirisYapti">
  Hoş geldin, {{ kullaniciAdi }}!
</div>

<div *ngIf="!kullaniciGirisYapti">
  <a routerLink="/giris">Giriş yap</a>
</div>

Angular 17 ve sonrasında yeni bir control flow sözdizimi geldi. Bu daha okunaklı ve IDE dostu:

@@if (kullaniciGirisYapti) {
  <div>Hoş geldin, {{ kullaniciAdi }}!</div>
} @@else {
  <a routerLink="/giris">Giriş yap</a>
}

else Template ile Alternatif Gösterme
Klasik *ngIf sözdiziminde else bloğu tanımlamak için ng-template kullanılır:

<div *ngIf="yukleniyor; else icerik">
  <p>Yükleniyor...</p>
</div>

<ng-template #icerik>
  <div>Veriler burada!</div>
</ng-template>

Şahsen ben yeni @@if / @@else sözdizimini çok daha sade buluyorum ve artık onu tercih ediyorum.

*ngFor — Liste Render Etmek
Listeleri göstermek için *ngFor kullanıyoruz. Şöyle basit bir kullanım:

export class BlogListesiComponent {
  yazilar = [
    { id: 1, baslik: 'Angular\'a Başlangıç', goruntuleme: 234 },
    { id: 2, baslik: 'Component Yapısı', goruntuleme: 189 },
    { id: 3, baslik: 'Data Binding', goruntuleme: 156 }
  ];
}

<ul>
  <li *ngFor="let yazi of yazilar">
    {{ yazi.baslik }} ({{ yazi.goruntuleme }} görüntüleme)
  </li>
</ul>

Yeni control flow sözdizimiyle:

@@for (yazi of yazilar; track yazi.id) {
  <li>{{ yazi.baslik }} ({{ yazi.goruntuleme }} görüntüleme)</li>
} @@empty {
  <li>Henüz yazı yok</li>
}

Yeni sözdiziminde track zorunlu, performans için. Angular her render'da hangi öğenin değiştiğini bu track anahtarı ile belirliyor. @@empty bloğu ise liste boş geldiğinde çok işe yarıyor.

Index, First, Last ve Daha Fazlası
*ngFor bize döngü sırasında extra bilgiler de verir: index, first, last, even, odd gibi. Örneğin:

<ul>
  <li *ngFor="let yazi of yazilar; let i = index; let ilk = first"
      [class.on-plani]="ilk">
    {{ i + 1 }}. {{ yazi.baslik }}
  </li>
</ul>

Gerçek Hayattan Bir Örnek
Yüklenme durumunu, boş listeyi ve dolu listeyi birlikte ele alan küçük bir component yapalım:

@@Component({
  selector: 'app-yorumlar',
  standalone: true,
  imports: [CommonModule],
  template: `
    @@if (yukleniyor) {
      <div class="yuklenme">Yorumlar yükleniyor...</div>
    } @@else {
      @@if (yorumlar.length === 0) {
        <p>Henüz yorum yapılmamış. İlk yorumu sen yap!</p>
      } @@else {
        <h3>{{ yorumlar.length }} yorum</h3>
        @@for (yorum of yorumlar; track yorum.id) {
          <div class="yorum">
            <strong>{{ yorum.yazar }}</strong>
            <p>{{ yorum.metin }}</p>
          </div>
        }
      }
    }
  `
})
export class YorumlarComponent {
  yukleniyor = false;
  yorumlar: { id: number; yazar: string; metin: string }[] = [
    { id: 1, yazar: 'Ali', metin: 'Harika anlatım, teşekkürler!' },
    { id: 2, yazar: 'Veli', metin: 'Çok faydalı oldu.' }
  ];
}

Özet
*ngIf (veya @@if) ile koşullu render, *ngFor (veya @@for) ile liste render yapmayı öğrendik. Bu iki directive'i kombinleyerek zengin template'ler oluşturabiliyoruz. Bir sonraki makalede Angular'ın en önemli kavramlarından biri olan Service ve Dependency Injection'a değineceğiz ve API'den veri çekmeyi göreceğiz. Kolay gelsin...