Angular ngIf Yapısı Nedir?

Herkese merhaba uzun süre sonra blog yazılarıma devam etme kararı aldım. Düzenli olarak paylaşmayı hedeflediğim blog yazılarımla beraber yeni bir serüvene başlıyoruz ve angular öğreniyoruz. Herkese şimdiden iyi okumalar dilerim. ❤

Bu yazımda;

• ngIf Kullanımının Avantajları,
• ngIf ile else Kullanımı,
• ngIf ve ng-template Kullanımı
• ngIf ile Değişken Tanımlama
• ngIf ile then ve else Kullanımı

konularına değineceğim.

https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/2023/2023-11/angular-logo-1200-628.png?sfvrsn=bf64b1ee_3

ngIf Kullanımının Avantajları

1. Performans: Koşul false olduğunda element DOM’dan tamamen kaldırıldığı için gereksiz render işlemleri ve performans kaybı önlenir.
2. Kod Temizliği: Koşullu içerikleri yönetmek için temiz ve anlaşılır bir yol sunar.
3. Dinamik İçerik Yönetimi: Kullanıcı etkileşimlerine göre içeriklerin dinamik olarak gösterilmesini sağlar.

Angular’da ngIf direktifi, belirli bir koşula bağlı olarak DOM'daki elementlerin render edilip edilmemesini kontrol eden bir yapısal direktiftir. ngIf direktifi kullanılarak, koşul doğru (true) olduğunda ilgili element DOM'a eklenir, yanlış (false) olduğunda ise DOM'dan kaldırılır. Bu sayede, kullanıcı arayüzündeki içerikleri dinamik olarak kontrol etmek mümkündür.

ngIf direktifi bir boolean ifade alır ve bu ifade true ise, ilgili HTML elementi DOM'a eklenir. Aksi takdirde, element DOM'dan kaldırılır.

Buradaki örnekte,isVisible değişkeni true olduğunda <div> elementi DOM'a eklenir. Eğer isVisible false ise, <div> elementi DOM'dan kaldırılır.

<div *ngIf="isVisible">
</div>

ngIf ile else Kullanımı

ngIf direktifi ile alternatif bir içerik göstermek için else yapısı kullanılabilir. Bu sayede, koşul false olduğunda alternatif bir içerik göstermek mümkündür. Aşağıdaki örnekteisVisible false olduğunda elseBlock içeriği gösterilir.

<div *ngIf="isVisible; else elseBlock">
</div>
<ng-template #elseBlock>
</ng-template>

ngIf ve ng-template Kullanımı

ng-template, Angular tarafından DOM'a eklenmeyen bir şablon tanımlamak için kullanılır ve ngIf ile birlikte çalışabilir. Bu örnekte isVisible true olduğu görülür.

<ng-template [ngIf]="isVisible">
  <div>
  </div>
</ng-template>

ngIf ile Değişken Tanımlama

ngIf direktifi ile bir değişken tanımlayarak koşulun sonucunu kullanabilirsiniz. Bu örnekte, {{ isVisible }} olduğunda true görünür.

<div *ngIf="let isVisible = condition">
</div>

ngIf ile then ve else Kullanımı

ngIf direktifi, then ve else blokları ile birlikte kullanılabilir. Bu sayede, bir koşulun true ve false olduğu durumlarda farklı şablonlar göstermek mümkündür. Bu örnekte thenBlock koşulu true görünürken elseBlock koşulu false gözükür.

<ng-template #thenBlock>
  <div>
  </div>
</ng-template>

<ng-template #elseBlock>
  <div>
  </div>
</ng-template>

<div *ngIf="isVisible; then thenBlock; else elseBlock"></div>

Diğer blog yazılarımda görüşmek üzere. :)