Angular NgClass

class binding

Belirli durumlara göre HTML içerisinde bulunan elementlere css class ataması yapabiliriz. Dosyalarımızın başlangıç halleri:

app.component.ts içerisinde bir kullanıcı listesi oluşturalım.

export class AppComponent {
    userList = [
        {
            name: "lorem",
            onlineStatus: true,
        },
        {
            name: "ipsum",
            onlineStatus: false,
        },
        {
            name: "dolor",
            onlineStatus: true,
        },
    ];
}

app.component.html içerisinde listemizi gösterelim.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li>
            {{user.name}}
        </li>
    </ng-template>
</ul>

Kullanıcıların onlineStatus durumlarını da gösterelim.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span> 
                {{user.onlineStatus}}
            </span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

Biraz css yazalım. Öncelikle listemizin varsayılan tarayıcı görünümünden kurtulalım.

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: 14px/16px Arial;
}

Her liste elemanı için biraz boşluk verelim.

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: 14px/16px Arial; 
    li{ 
        padding: .2rem;
    }
}

Şimdi de online durumunu düzenleyelim.

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: 14px/16px Arial;
    li{ 
        padding: .2rem;
        span{
            display: inline-block;
            vertical-align: middle;
            &:first-child{
                width: 16px;
                height: 16px;
                background: red;
                border-radius: 50%;
                margin-right: .5rem;
            }
        }
    }
}

HTML içerisinde bulunan {{user.onlineStatus}} ifadesini silelim.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

Şimdilik tüm kullanıcılarımız offline görünüyor.

Online olan kullanıcılarımızın durumlarını yeşil renk yapalım. Bunun için önce gerekli css kurallarımızın ekleyelim.

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: 14px/16px Arial;
    li{ 
        padding: .2rem;
        span{
            display: inline-block;
            vertical-align: middle;
            &:first-child{
                width: 16px;
                height: 16px;
                background: red;
                border-radius: 50%;
                margin-right: .5rem; 
                &.online{ 
                    background: green;
                }
            } 
        }
    }
}

Şimdi HTML bölümüne geçelim. Burada adım adım gideceğim.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span [class]=""></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

[class]="" ifadesi ile elementimizin class property sine bir binding yapacağımı belirttim. Yani class bölümüne app.component.ts içerisinde bulunan bir property, method vb. eşitlenebilir.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span [class]="user.onlineStatus"></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

[class]="user.onlineStatus" ifadesi ile kullanıcımızın onlineStatus property değerini aldım.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span [class.online]="user.onlineStatus"></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

[class.online]="user.onlineStatus" ifadesi ile kullanıcımızın onlineStatus durumu true ise elementimize online css class ı eklenir, değilse eklenmez.

NgClass

class Binding ile elementimize en çok bir tane css class ekleyebiliriz. NgClass ile daha fazla css class eklememiz mümkün.

NgClass JSON formatında bir nesne ister.

Kullanıcı listemizi biraz değiştirelim.

export class AppComponent {
    userList = [
        {
            name: "lorem",
            onlineStatus: true, 
            favorite: true
        },
        {
            name: "ipsum",
            onlineStatus: false,
            favorite: true
        },
        {
            name: "dolor",
            onlineStatus: true,
            favorite: false
        },
    ];
}

favorite isimli bir property daha ekledim.

favorite property si true ise online durmunun içerisine sarı renkli bir daire yerleştirelim.

Gerekli css kurallarını ekleyelim.

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: 14px/16px Arial;
    li{ 
        padding: .2rem;
        span{
            display: inline-block;
            vertical-align: middle;
            &:first-child{
                width: 16px;
                height: 16px;
                background: red;
                border-radius: 50%;
                margin-right: .5rem; 
                &.online{ 
                    background: green;
                } 
                &.favorite{ 
                    position: relative;
                    &:before{ 
                        content: ""; 
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        background: yellow;
                        left: 50%;
                        top: 50%;
                        margin-left: -4px;
                        margin-top: -4px;
                        border-radius: 50%;
                     }
                }
            } 
        }
    }
}

app.component.html üzerinde gerekli değişikliklerimizi yapalım.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span [ngClass]=""></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

ngClass ifadesini ekledim ve bir binding yapacağım.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span [ngClass]="{}"></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

ngClass a boş nesneyi eşitledim ve şimdi gerekli nesne yapısını oluşturalım.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span [ngClass]="{ 
                      'online': user.onlineStatus
                   }"></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

'online': user.onlineStatus ifadesi class binding de yaptığımız gibi true ise css class ı ekler, değilse eklemez.

<ul>
    <ng-template ngFor let-user [ngForOf]="userList">
        <li> 
            <span [ngClass]="{ 'online': user.onlineStatus, 'favorite': user.favorite}"></span>
            <span> 
                {{user.name}}
            </span>
        </li>
    </ng-template>
</ul>

"favorite": user.favorite için de aynı durum geçerlidir.

Dilerseniz ngClass a eşitleyeceğimiz nesneyi app.component.ts dosyası içerisinde oluşturabilir ve ngClass ı bu nesneye eşitleyebiliriz. Şu an elimizde bulunan HTML yapısı buna müsait değil. İleride bunu da yapacağız.

Sonraki konumuz Angular NgStyle ve Safe Navigation Operator olacaktır.