Angular NgStyle ve Safe Navigation Operator
ngStyle
HTML elementlerine inline style eklememizi sağlar. Öncelike PlainJS ile nasıl yaptığımızı görelim.
HTML içerisinde bir div olduğunu varsayalım.
<div id="myDiv">Lorem</div>
Javascript içerisinde bu div elementini bulalım.
var htmlElement = document.getElementById("myDiv");
htmlElement
imizin yazı rengini değiştirelim.
var htmlElement = document.getElementById("myDiv");
htmlElement.style.color = "red";
Dosyalarımızın başlangç halleri aşağıdadır.
Bir önceki konuda kullandığımızı userList
nesnesini yine kullanabiliriz.
export class AppComponent {
userList = [
{
name: "lorem",
onlineStatus: true,
favorite: true
},
{
name: "ipsum",
onlineStatus: false,
favorite: true
},
{
name: "dolor",
onlineStatus: true,
favorite: false
},
];
}
app.component.html içerisinde listemizi gösterelim.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span></span>
<span>
{{user.name}}
</span>
</li>
</ng-template>
</ul>
Kullanıcıların onlineStatus
lerini göstereceğimiz span
elementi için css yazalım. Bunun için ilgili span
elementine bir css class name verelim.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span class="status"></span>
<span>
{{user.name}}
</span>
</li>
</ng-template>
</ul>
app.component.less dosyamıza gerekli css kurallanı ekleyelim.
.status{
border-radius: 50%;
width: 8px;
height: 8px;
background: black;
display: inline-block;
vertical-align: middle;
}
ul
elementini görünümünü düzenleyelim.
ul{
margin: 0;
padding: 0;
list-style-type: none;
}
Şimdi kullanıcıların onlineStatus
property lerine göre span
elementinin arka plan rengini değiştirelim.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span class="status" [ngStyle]=""></span>
<span>
{{user.name}}
</span>
</li>
</ng-template>
</ul>
[ngSytle]=""
ile bir binding yapacağımı belirttim. ngStyle
içerisine JSON formatında bir nesne alır. Aynı ngClass
gibidir.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span class="status" [ngStyle]="{}"></span>
<span>
{{user.name}}
</span>
</li>
</ng-template>
</ul>
Nesne içerisine javascript ile yaptığımız gibi style ataması yapabiliriz.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span class="status" [ngStyle]="{backgroundColor: 'red'}"></span>
<span>
{{user.name}}
</span>
</li>
</ng-template>
</ul>
backgroundColor: "red"
bölümünde tırnak işareti ile belirttiğim yere ihtiyaç halinde javascript yazabiliriz. Kullanıcıların onlinteStatus
lerine göre renk değiştirelim.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span class="status" [ngStyle]="{
backgroundColor: (user.onlineStatus ? 'green' : 'red')
}"></span>
<span>
{{user.name}}
</span>
</li>
</ng-template>
</ul>
"red"
ifadesi yerine ()
parantez içerisinde javascript kodlarını yazdım.
Aynı görünümü style
binding kullanarak da yapabiliriz.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span class="status" [style.backgroundColor]="user.onlineStatus ? 'green' : 'red'"
></span>
<span>
{{user.name}}
</span>
</li>
</ng-template>
</ul>
Safe Navigation Operators
userList
nesnemizde her kullanıcı için address
isimli bir property ekleyelim.
export class AppComponent {
userList = [
{
name: "lorem",
onlineStatus: true,
favorite: true,
address: {
city: "",
street: ""
}
},
{
name: "ipsum",
onlineStatus: false,
favorite: true,
address: {
city: "",
street: ""
}
},
{
name: "dolor",
onlineStatus: true,
favorite: false
},
];
}
Son kullanıcımızı address
property si eklemedim.
HTML içerisinde address
bölümünü gösterelim.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span *ngIf="user.favorite">Favorite </span>
<span class="status" [style.backgroundColor]="user.onlineStatus ? 'green' : 'red'"
</span>
<span>
{{user.name}}
</span>
<div>
<b>Address:</b>
<div>
Street: {{user.address.street}}
</div>
<div>
City: {{user.address.city}}
</div>
</div>
<hr>
</li>
</ng-template>
</ul>
Tarayıcımızın console bölümüne baktığımızda hata aldığımızı görebilirsiniz.
Çünkü son kullanıcımızın address
property si yok ve HTML içerisineundefined
geliyor. undefined nesnenin de street
property si bulunamıyor.
HTML üzerinde yapacağımız ufak bir değişlik bizi bu hatadan kurtaracaktır.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span *ngIf="user.favorite">Favorite </span>
<span class="status" [style.backgroundColor]="user.onlineStatus ? 'green' : 'red'"
</span>
<span>
{{user.name}}
</span>
<div>
<b>Address:</b>
<div>
Street: {{user?.address?.street}}
</div>
<div>
City: {{user?.address?.city}}
</div>
</div>
<hr>
</li>
</ng-template>
</ul>
Address bölümünde bulunan kodlara noktalardan önce soru işaretleri ekledim. Kodumuz, şayet nesne var ise notasyonu izlemeye devam eder, yok ise işleme devam etmez.
Bunu *ngIf
kullanarak da çözebilirdik.
<ul>
<ng-template ngFor let-user [ngForOf]="userList">
<li>
<span *ngIf="user.favorite">Favorite </span>
<span class="status" [style.backgroundColor]="user.onlineStatus ? 'green' : 'red'"
</span>
<span>
{{user.name}}
</span>
<div *ngIf="user.address">
<b>Address:</b>
<div>
Street: {{user.address.street}}
</div>
<div>
City: {{user.address.city}}
</div>
</div>
<hr>
</li>
</ng-template>
</ul>
Address div
imizi address
property yok ise render etmeyiz.
Sonraki konumuz Pipe lar olacaktır.