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.