Angular ngIf, ngFor ve ngTemplate

ngIf

Belirlediğimiz koşul/koşullara bağlı olarak, kullanıldığı HTML elementi render eder/etmez.

HTML ve .ts dosyalarımız aşağıdaki gibidir.

app.component.ts dosyamızda bir kullanıcı oluşturalım.

user adında bir kullanıcı oluşturdum ve inline şekilde tipini belirledim.

app.component.ts dosyamızda kullanıcı mızı görüntüleyelim.

Tarayıcıya baktığımızda aşağıdaki gibi bir sonuç görürüz.

interests property si string dizisi olduğu için otomatikman string tipine dönüştürülüp render edilmiştir.

Kullanıcının isOnline durumuna göre “online” yada “offline” yazısı gösterelim.

Yukarıdaki HTML her iki durumu da gösterecektir. ngIf ile isOnline durumunu ele alalım.

*ngIf="isOnline" kullanıcın isOnline durumu true ise, *ngIf="!isOnline" kullanıcın isOnline durumu false ise anlamına gelemktedir. ngIf bir Angular directive dir bu yüzden * ile ifade edilir.

Kullanıcının isOnline durumu true olduğu için tarayıcıda Online yazısı görünmektedir.

ngFor

Kullanıcının interests property sinde bulunan string ifadeleri bir liste içerisinde gösterelim.

interests bölümü için bir ul oluşturdum.

ngFor directive ile kullanıcının interests property si içerisinde loop ile dolaşacağız.

*ngFor="let item of user.interests" user.interests property si içerisinde bulunan her nesne bizim için artık item değişkenine eşittir.

Bu örnek içerisinde item interests içerisindeki her bir string e eşittir. Dolayısıyla li elementi içerisine item nesnesini yazdırabiliriz.

Tarayıcıya baktığımızda aşağıdaki gibi bir sonuç görürürz.

user.interests dizisi içerisidne bulunan her bir string için bir li nesnesi oluşturuldu ve string ifade li içerisine yazdırıldı.

Kullanıcımıza friends isimli bir property ekleyelim.

Şimdi friends property sinin içerisini dolduralım.

friends property si içerisine iki obje ekledim, objelerimizin id, name ve isOnline isimli property leri mevcut.

Kullanıcının arkadaşlarını HTML içerisinde gösterelim.

interests bölümünde yaptıklarımızın aynısını friends için yaptım. Tarayıcıya baktığımızda sonuç istediğimiz gibi olmayacaktır.

Çünkü listelemek istediğimiz şey obje dizisidir. item değişkeni bizim için artık freinds dizisi içerisinde bulunan her bir objeye eşittir. Buna göre düzenleyelim.

kişilerin adını ve online durumlarını ekrana yazdırdık.

Kullanıcının sadece online olan arkadaşlarını gösterelim.

Tarayıcıya baktığımızda sadece Lorem adındaki kişinin render edildiğini görebiliriz ancak gereksiz yere bir li daha render edilmiş. Bunun sebebi ise isOnline = false olan kişi için li oluşturduldu ama içerisine div eklenmedi.

ngTemplate

Şimdi gereksiz yere li render etmenin önüne geçelim.

li elementini ng-template içerisine aldım. ngTemplate Angular içerisinde template ler oluşturduğumuz ve belirlediğimiz durumlara göre içeriğini render eden bir Angular elementi dir.

ng-template elementimize neyi render edeceğini söyleyelim.

li içerisinde bulunan *ngFor ifadesini sildim. ng-template imize bir for döngüsü olacağını belirttik.

Döngü içerisine girecek her elementin item değişkenine eşitleneceğini belirttik.

ngForOf ile döngüye girecek data yı belirledik.

Tarayıcımıza baktığımızda her şeyin düzgün çalıştığını ama hala içi boş bir li render edildiğini görebiliriz. Şimdi bu durumu düzeltelim.

li nin hemen içerisinde bulunan div elementinden *ngIf ifadesini sildim ve li içerisine aldım. Artık içi boş li render edilmiyor.

ng-template in bir çok kullanım şekli vardır, ileride göreceğiz.

Sonraki konumuz Angular ngClass olacaktır.

Front end developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store