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.