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.

export class AppComponent {
    user: {
        id: number; 
        name: string;
        interests: string[];
        isOnline: boolean;
    } = {
        id: 1, 
        name: "Volkan",
        interests: ["tennis", "yoga", "video games"],
        isOnline: true
    };
}

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.

<div>
    {{user.name}}
</div>
<div>
    {{user.isOnline}}
</div>
<div>
    {{user.interests}}
</div>

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.

<div>
    {{user.name}}
</div>
<div>
    <span>Online</span>
    <span>Offline</span> 
</div>
<div>
    {{user.interests}}
</div>

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

<div>
    {{user.name}}
</div>
<div>
    <span *ngIf="user.isOnline">Online</span>
    <span *ngIf="!user.isOnline">Offline</span> 
</div>
<div>
    {{user.interests}}
</div>

*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.

<div>
    {{user.name}}
</div>
<div>
    <span *ngIf="user.isOnline">Online</span>
    <span *ngIf="!user.isOnline">Offline</span> 
</div>
<div>
    <ul> 
        <li></li>
    </ul>
</div>

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

<div>
    {{user.name}}
</div>
<div>
    <span *ngIf="user.isOnline">Online</span>
    <span *ngIf="!user.isOnline">Offline</span> 
</div>
<div>
    <ul> 
        <li *ngFor=""></li>
    </ul>
</div>

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

<div>
    {{user.name}}
</div>
<div>
    <span *ngIf="user.isOnline">Online</span>
    <span *ngIf="!user.isOnline">Offline</span> 
</div>
<div>
    <ul> 
        <li *ngFor="let item of user.interests"></li>
    </ul>
</div>

*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.

<div>
    {{user.name}}
</div>
<div>
    <span *ngIf="user.isOnline">Online</span>
    <span *ngIf="!user.isOnline">Offline</span> 
</div>
<div>
    <ul> 
        <li *ngFor="let item of user.interests"> 
            {{item}}
        </li>
    </ul>
</div>

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.

export class AppComponent {
    user: {
        id: number; 
        name: string;
        interests: string[];
        isOnline: boolean; 
        friends: any[];
    } = {
        id: 1, 
        name: "Volkan",
        interests: ["tennis", "yoga", "video games"],
        isOnline: true, 
        friends: []
    };
}

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

export class AppComponent {
    user: {
        id: number; 
        name: string;
        interests: string[];
        isOnline: boolean; 
        friends: any[];
    } = {
        id: 1, 
        name: "Volkan",
        interests: ["tennis", "yoga", "video games"],
        isOnline: true, 
        friends: [ 
            { 
                id: "f_1", 
                name: "Lorem", 
                isOnline: true
            }, 
            { 
                id: "f_2", 
                name: "Ipsum",
                isOnline: false
             }        
         ]
    };
}

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.

<div>
    {{user.name}}
</div>
<div>
    <span *ngIf="user.isOnline">Online</span>
    <span *ngIf="!user.isOnline">Offline</span> 
</div>
<div>
    <ul> 
        <li *ngFor="let item of user.interests"> 
            {{item}}
        </li>
    </ul>
</div>
<div>
    <ul> 
        <li *ngFor="let item of user.friends"> 
            {{item}}
        </li>
    </ul>
</div>

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.

<div>
    {{user.name}}
</div>
<div>
    <span *ngIf="user.isOnline">Online</span>
    <span *ngIf="!user.isOnline">Offline</span> 
</div>
<div>
    <ul> 
        <li *ngFor="let item of user.interests"> 
            {{item}}
        </li>
    </ul>
</div>
<div>
    <ul> 
        <li *ngFor="let item of user.friends"> 
            <div> 
                {{item.name}}
            </div> 
            <div> 
                {{item.isOnline}}
            </div>
        </li>
    </ul>
</div>

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

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

<div>
    <ul> 
        <li *ngFor="let item of user.friends"> 
            <div *ngIf="item.isOnlne">
                <div> 
                    {{item.name}}
                </div> 
                <div> 
                    {{item.isOnline}}
                </div>            
            </div>
        </li>
    </ul>
</div>

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.

<div>
    <ul> 
        <ng-template>
            <li *ngFor="let item of user.friends"> 
                <div *ngIf="item.isOnlne">
                    <div> 
                        {{item.name}}
                    </div> 
                    <div> 
                        {{item.isOnline}}
                    </div>            
                 </div>
            </li> 
        </ng-template>
    </ul>
</div>

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.

<div>
    <ul> 
        <ng-template ngFor>
            <li> 
                <div *ngIf="item.isOnlne">
                    <div> 
                        {{item.name}}
                    </div> 
                    <div> 
                        {{item.isOnline}}
                    </div>            
                 </div>
            </li> 
        </ng-template>
    </ul>
</div>

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

<div>
    <ul> 
        <ng-template ngFor let-item>
            <li> 
                <div *ngIf="item.isOnlne">
                    <div> 
                        {{item.name}}
                    </div> 
                    <div> 
                        {{item.isOnline}}
                    </div>            
                 </div>
            </li> 
        </ng-template>
    </ul>
</div>

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

<div>
    <ul> 
        <ng-template ngFor let-item [ngForOf]="user.friends">
            <li> 
                <div *ngIf="item.isOnlne">
                    <div> 
                        {{item.name}}
                    </div> 
                    <div> 
                        {{item.isOnline}}
                    </div>            
                 </div>
            </li> 
        </ng-template>
    </ul>
</div>

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.

<div>
    <ul> 
        <ng-template ngFor let-item [ngForOf]="user.friends">
            <li *ngIf="item.isOnline"> 
                <div>
                    <div> 
                        {{item.name}}
                    </div> 
                    <div> 
                        {{item.isOnline}}
                    </div>            
                 </div>
            </li> 
        </ng-template>
    </ul>
</div>

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.