Angular 4 dahili direktifler ve kendi direktifleirmizin olusturulmasi – Built-in Directives & Custom directives & Content Projections

Angular 2 & 4 içinde kullanabileceğimiz bir çok haızr direktif bulunmakta. Genel olarak , html tarafında elementlerin davranışlarını / görünüşlerini değiştirmek için yada html içinde ekleme/çıkartma yapmak için kullanabileceğimiz bu yardımcı araçlar, bir çok durumda bize kolaylık sağlamakta.

Genel olarak iki kısma ayırabileceğimiz Angular Built-in / dahili direktiflerin ilk grubu olan, “Attribute directives”  lere bakarak başlayalım.

Attribute directives

Attribute directives,  bir html elementinin görünüşü yada davranışını değiştiren  direktiflerimiz.

NgStyle:

Html elementine css özellikleri eklemek için kullanabileceğimiz “NgStyle” direktifi, tahmin edeceğiniz gibi, html elementinin “style” atribute / özelliğini kullanmakta.

Angular içinde bu tür ihiyacaçlarımız için kullanabileceğimiz diğer bir alternatif olan “style” attribute unu  direkt olarak kullandığımız şu örneğe bakalım

 <h3 [style.color]="yaziRengi">Kirmizi Yazi</h3><br>

Yazırengimizi component içinde “yazıRengi” isimli bir değişkende tuttuğumuzu varsayarsak yukarıdkai kullanım ilk alternatifimizi oluşturmakta.

İkinci alternatifimiz ise daha fazla kontrol ve dinamizme ihtiyaç duyduğumuz durumlarda kullanabileceğimiz NgStyle.

<h3 [ngStyle]="{fontWeight: yaziBoyutu, color: yaziRengi}">yazi boyutu ve yazi rengi</h3>

ngStyle kullaniminin bir nesne aldiğina dikkat edin, ilk olarak değiştirmek istediğimiz style özelleğini “fontWeight” , sonrasında da taşıyacağı değeri belirtmiş olduk. Bu şekilde diledğimiz kadar değeri componentlerimizde tanımlayıp ngStyle içinde kullanabilmekteyiz.

“fontWeight” şeklinde kullandığımız css özelliğini, dilerseniz “font-weight” şeklinde(css) içindeki orjinal haliyle de kullanabiliriz.

NgClass

Html elementlerimize dinamik olarak css sınıflarını atamak için kullanabileceğimiz direktifimiz. Yİne önce ilk alternatifimize bakarak başlayalım; eğer kullanıcı admin ise, ilgili elemente “adminUI” isimli bir css sınıfı atayama çalışalım ;

<div [class.adminUI]="isAdminv()">Admin UI</div>

ngClass kullanarak ise aynı işlemi aşağıdaki gibi gereçekleştirebiliriz.

<div [ngClass]="{'adminUI': isAdmin(), 'diğerCSSSinifi': isDiğerCssSinifi()}">Ngstyle ile css sınıfları</div><br>

Tıpkı, ngStyle gibi yine bir nesne tanımlaması yaptığımıza dikkat edin, atamak istediğimiz “sınıf ismi” örneğin : “adminUI”, sonraki değerin “isAdmin()” true döndürdüğü şartlarda aktif olacaktır. Css sınıflarımızı  ‘ tek tırnak içinde strin/metin  olarak belirttiğimize dikkat edin.

NgModel

ngModel aslında tam olarak Attribute directives olarak sayılmasada, görünüş/etkileşim adına kullanabileceğimiz bir direktif grubuna da girdiği için onada değineceğiniz.

NgModel direktifinin ana görevi 2 way data-binding / iki taraflı veri bağlama olarak özetlenebilir. İki taraflı veri bağlamadan kastımız, bir yerede ilgili veriyi dinleyip, html içinde kullanmak istediğiniz diğer yerlerde bu değişikliği otomatik olrak yansıtması şeklinde tanımlayabiliriz.

kullanım şekli, ise biraz garip bir smz dizime sahip , dinlemek istediğimiz beriyi , örneğin bir textbox değerini , aşağıdaki gibi NgModel direktifi ile donatmamız yeterli

  <input type="text" class="form-control" [(ngModel)]="yaziRengi" placeholder="yazi rengi giriniz">

[(ngModel)]="degisken_ismi"

şeklinde kullanım ile artık html içinde, istediğimiz yerde dinleyebileceğimiz ve kullanabileceğimiz bir değişkenimiz oldu, şimdi bu değişkeni bir önceki başlıktaki ngStyle ile beraber kullanalım;

<h3 [ngStyle]="{color: yaziRengi}">yazi rengi : {{yaziRengi}}</h3>

Artık, tetxtbox a yazdığımız değeri, hem ngStyle içinde dinamik renk seççimi için hemde {{ degisken_ismi}} şeklinde istediğimiz yerde kullanabiliriz. Yukarıdaki gibi bir kullanımla aşağıdaki görselde gördüğümüz, bir yeteneğe sahip olabiliriz örneğin,

ngModel and ngStyle

ngModel cok yetenekli olsada, değişiklik takibi sürekli olduğu için az kullanmak ve gerçekten ihtiyacımız olan yerde kullanmak önemli. Performans açısından az ve öz kullanım ngModel açısından önemli. Son bir önrnek olarak , ngModel in yeteneklerine bir başka bakış açıcısı olarak aşağıdaki örneğe bakın.

filters and ngModel

Bu örnekteki tüm filitreler ngModel kullanmakta. Söz dizimi olarak köşeli paranez içinde normal parantez kullanarak tanımladığımız ngModel hem girdi hem çıktı sağlamakta, hatırlarsanız angular içinde girdilerimiz için [ ] köşeli, çıktılarımız için {} süslü parantez kullanmaktaydık. Bu hatırlatma ile sanırım tnaımlama şekli anlam kazanmıştır.

Structural-directives / Yapısal direktifler.

Bu direktif grubumuzun ana görevi, html içinde ekleme çıakrma ve tekrar etme yapmak diyebiliriz. İlk olarak NgIf ile başlayalım.

NgIf

Html içinde şartlı olarak bir elemeni göstermek istediğimiz durumlarda kullanabielceğimiz seçeneklerden biri olan ngIf kullanım / söz dizimi olarak şağıdaki gibi tanımlanmakta

<div *ngIf=”isAdmin; else userTemplate”>
admin ekranı
</div>
<ng-template #userTemplate>Kullanıcı Ekranı…</ng-template> 

aldığı değişken yada metod dan dönen değer doğruysa “true” ilgili elementi yazdıran bir koşul sunmakta. Eğer ikinci parametre olarak bir “else” bloğu sağlanırsa, şart yanlış / false olduğunda  ilgili templati yazdırmamızı sağlmakta.

Yukarıdaki yapıyı iki tane ngIf kullanarak da oluşurabiliriz.

<div *ngIf="isAdmin">
    admin ekranı
</div>
<div *ngIf="isUser">Kullanıcı Ekranı...</div>

iki kullanımda doğru ve aynı sonucu vermekte , hangisi kolayınıza gidecekse onu kullanabiliriz. Bir önemli noktayı daha belirtmekte fayda var, Structural-directives , ilgili elementi hml içinde tamamen kaldırmakta, attribute direktifleri ise, sadece görünürlüğü değiştirmekte.

Yani, aşağıdaki gibi bir kullanımda

<div [hidden]="gizlimi()">Gizli</div>

ilgili div elementi eğer gizlimi() metodu true değer döndürüyorsa, sadece görünürlüğünü yitirecektir, ama html içinde hala kalacaktır.

Ama ngIf ile aşağıdaki gibi bir kullanım, ilgili elementi tamamen html içinde kaldıracak, ve eğer şart değişir ve gizlilik kalkarsa, tekrar yazacaktır.

<div [hidden]="gizlimi()">Gizli</div>
Attribute direktifleriyle, structural direktifleri arasındaki en önemli fark budur.

NgSwitch

ngSwich de ıpkı ngIf gibi , html elementlerimizi şartlı şekilde yazdırmak yada kaldırmak için kullanılmakta, aradaki fark, ngSwitch bir çok farklı şartı aynı anda kontrol edebilmekte.

<div [ngSwitch]="kullanici">
  <app-admin-ui  *ngSwitchCase="'admin'"  ></app-admin-ui>
  <app-user-ui   *ngSwitchCase="'user'"   ></app-user-ui>
  <app-editor-ui *ngSwitchCase="'editor'" ></app-editor-ui>
  <app-other-ui  *ngSwitchDefault ></app-other-ui>
</div>

Ayni veri için birden fazla şartı kontrol etmek istediğimizde gayet kulanışlı bir yapı sunmakta. Her bir şartı ngIf ile tek tek kontrol etmektense, [ngSwitch]="kullanici" şeklinde, kontrol etmek istediğimiz, veriyi belirtip, daha sonra hangi şartları kontrol etmek istiyorsak, *ngSwitchCase ile belirtmemiz yeterli. Eğer hiç bir şart eşleşmiyorsa, *ngSwitchDefault ile bu durum içinde bir tanımlama yapabilmekteyiz.

NgFor

ngFor, html içinde loop / döngü oluşturmak için kullanacağımız direktifimiz. Kullanım söz dizimi aşağıdaki gibi;

<div *ngFor="let urun of urunler">{{urun.name}}</div>

*ngFor bloğu ilk olarak, html içinde kullanabilmemiz için değişken tnaımı ile başlıyor , let urun sonrasında loop / döngüye sokmak istediğimiz dizi yi belirtiyoruzö of urunler hepsi bukadar. ngFor ile ilgili bilmemiz gereken 2 önemli nokta var, birincisi, bir çok durumda, dizinin kaçıncı elemanını kullandığımızı bilmek isteyeceğiz.

bunun için; ngFor un her döngü için bize sağladığı, index isimli değişkeni kullanabiliriz.

<div *ngFor="let urun of urunler ; let i = index">{{urun.name}}</div>

şeklinde bir kullanım ile, index değerini bir değişkene atamamız yeterli. Bir başka önemli konuda “trackBy” abgular değişiklikleri daha hızlı bulmak ve UI ı daha hızlı güncellemek için bir “tekil indeksleme” imkanı sunmakta, zorunlu olmasada, özellikle büyük sayıdaki veriler de trackBy ile performans artırabilmekteyiz.

<div *ngFor="let urun of urunler ; let i = index ; trackBy: trackByMetodu">{{urun.name}}</div>

yukaridaki bir önceki ngFor döngüsünden farklı olarak, trackBy: trackByMetodu  ifadesinide kullandık, angular ngFor ile döngüyü başlattığımızda, her bir elemanı component içinde tanımlayacağımız,  “trackByMetodu” isimli bir metodu çağırarak indeksleyecektir.

Bu şekilde, değişiklik takibini tüm dizi üzerinde değil, her bir eleman üzerinde de tek tek yapabielcektir, ve html tarafında ilgili değişikliklerin yansıtılması daha hızlı yapılacaktır. Örnek bir trackBy metodunu componentimiz de aşağıdaki gibi tanımlayabiliriz.

trackByMetodu(index: number, urun: IUrun) {
    return urun.id;
}

bu metoda, ngFor tarafından döngünün her bir adımında, bir eleman (ürün) parametre olarak geçecektir, ayrıca kaçınci elamanı işlediğimizde yine parametre olarak sağlanmakta.

Yukarıdaki metod ile , ngFor ve Angular a “dizi içindeki her bir elemanı return ettiğim “urun.id” ile indeksle, böylece değişiklik takibi ve değişikliklerin html yansıması daha hızlı olsun demiş olduk.

Tekrar edecek olursak , veri sayısı az olan durumlarda, trackBy kullanımı tamamen opsiyonel ama veri sayısı büyükse trackby performans olarak çok işe yarayacaktır.

 

1 – Kendi Attribute Direktiflerimizin olusturulmasi

 

2- Kendi Structural Direktiflerimizin olusturulmasi

3-Content Projections a bakis

 

2 thoughts on “Angular 4 dahili direktifler ve kendi direktifleirmizin olusturulmasi – Built-in Directives & Custom directives & Content Projections

Leave a Reply

Your email address will not be published. Required fields are marked *