structural directives in Angular

Angular'da *ngIf, *ngFor gibi yapılar, yapısal direktifler (structural directives) olarak adlandırılır. Bu direktifler, HTML'deki elementlerin yapısını değiştirmek veya kontrol etmek için kullanılır.

Yapısal Direktifler Nedir?

• Yapısal direktifler, HTML DOM ağacında elementleri ekleyip kaldırmaya yarayan direktiflerdir.
• Bu direktifler, bileşenlerin veya sayfaların görünümünü dinamik olarak değiştirmemize olanak tanır.
• * işareti, bu direktiflerin yapısal olduğunu ifade eder. Bu işaret Angular tarafından kısa bir gösterim olarak kabul edilir ve aslında bu direktiflerin DOM elementini manipüle ettiğini belirtir.

En Yaygın Yapısal Direktifler:

1. *ngIf:

   • Belirtilen koşul doğruysa (true) HTML elementini DOM'a ekler, aksi takdirde çıkarır.
   • Örnek:

    <div *ngIf="isVisible">Bu metin sadece 'isVisible' true olduğunda görünür.</div>
   

2. *ngFor:

   • Bir dizi veya koleksiyon üzerinde döngü yaparak HTML elementlerini tekrarlar.
   • Örnek:

    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
   

3. *ngSwitch:

   • Belirli bir duruma göre farklı bileşen veya elementleri görüntülemek için kullanılır.
   • Örnek:

    <div [ngSwitch]="day">
      <p *ngSwitchCase="'Monday'">Bugün Pazartesi</p>
      <p *ngSwitchCase="'Tuesday'">Bugün Salı</p>
      <p *ngSwitchDefault>Bugün Hafta Sonu</p>
    </div>
   

Direktif Türleri:

1. Yapısal Direktifler:

   • HTML'deki elementlerin yapısını değiştirir (ekler veya çıkarır).
   • Örnekler: *ngIf, *ngFor, *ngSwitch.

2. Öznitelik Direktifleri (Attribute Directives):

   • Bir elementin görünümünü veya davranışını değiştirir, ancak elementin yapısını değiştirmez.
   • Örnek: [ngClass], [ngStyle], ngModel.

Özet:

• *ngIf ve *ngFor gibi özelliklere yapısal direktifler denir.
• Yapısal direktifler, DOM üzerinde elementleri dinamik olarak ekleyip kaldırır.
• Angular'da ayrıca öznitelik direktifleri de vardır ve bunlar elementin stilini veya davranışını değiştirir.