Angular Structural Directive Nedir?

Angular Eğitim Serisine “Angular Structural Directive Nedir?” konulu yazı ile devam edeceğim. Bir önceki yazımda “Angular Directive Nedir ve Nasıl Custom Directive Oluşturulur” konulu yazıyı paylaştım. Bir önceki yazım ile direk ilişkili olduğu için eğer okumadıysanız, bir önceki yazıyı da okumanızı öneririm.

Bu yazıda Angular Structural Directive’ler ile DOM yapılarını nasıl manupule edeceğimizi anlatacağım. Angular ile gelen structural directive’ler ile örnekler paylaşacağım ve nasıl custom structural directive oluşturulur konularına değineceğim.

Angular Eğitim Seti ile alakalı yazıların tamamına buradan ulaşabilirsiniz.

Angular Structural Directive

Angular, elementlerimizin DOM yapısını hızlı ve kolayca değiştirmemizi sağlayan bir template motoruna sahiptir. Bu motor içinde structural directive’lerin rolü ise genellikle öğeler eklemek, kaldırmak veya işleyerek şekillendirmekdir.

Diğer directive’lerde olduğu gibi host elemana uygulamanız gerekir. Daha sonra bu directive, host elemana ve onun child elementlerine ne yapması gerekiyorsa onu yapabilecektir.

Structural Directive’leri tanıması kolaydır. Aşağıdaki örnekteki gibi host elemnete, önüne yıldız (*) koyarak bind edilir.

<div *ngIf="team != null" >{{team.name}}</div>

Angular Structural Directive’ler;

• NgFor
• NgIf
• NgSwitch

Bu yazımdan itibaren Angular serisi için oluşturacağım kodları stackblitz.com üzerinden stackblitz üzerinden paylaşacağım. Bu sayede yazılan kodlar üzerinden online editör ile denemeler yapabilirsiniz. Sizinde burada bir hesap oluşturmanızda fayda var. Neyse konuya dönelim.

NgFor

Kodlamaya aşina olanlarınızın adından da anlayacağı gibi host element üzerinden döngü ile render işlemini yapmanızı sağlayacak directive’dir. Html içinde örnekteki gibi kullanabiliriz.

Anlamı; “heroes” dizisi içindeki eleman kadar li element’i oluştur ve her elemanın ismini li elementi içine render et.

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

NgIf

Template içinde if-clause özelliği kazandıran directive’dir.

<div *ngIf="hero" class="name">{{hero.name}}</div>

Anlamı; *ngIf=”condinition” condinition sağlanır ise directive’i inject ettiğin element’i render et.

NgSwitch

Template içinde switch-case özelliği kazandıran directive’dir.

<div [ngSwitch]="hero?.emotion"> 
 <app-happy-hero *ngSwitchCase="'happy'" [hero]="hero">
 </app-happy-hero> 
 <app-sad-hero *ngSwitchCase="'sad'" [hero]="hero">
 </app-sad-hero> 
 <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero">
 </app-confused-hero> 
 <app-unknown-hero *ngSwitchDefault [hero]="hero">
 </app-unknown-hero> 
</div>

Anlamı; “hero” nesnesinin “emotion” parametresinin değerine göre *ngSwitchCase directive’i eşleşen component’leri render et.

Demo ve kodlara buradan ulaşabilirsiniz;

Live Demo

Codes

—–Yazı güncellenmeye devam edecektir…

Özet

Bu yazıda; Mobilhanem üzerinde yayımlamaya başladığım Angular Eğitim Seti yazı serisinden Angular Structural Directive konusunu işledik. Angular Structural Directive çeşitlerini anlattık.

Eğer bir önceki Angular Directive Nedir ve Nasıl Custom Directive Oluşturulur? konulu yazımı okumadıysanız konu bütünlüğü açısından okumanızı tavsiye ederim.

Bu yazınında sonuna geldik. Bir sonraki yazımda görüşmek üzere.

Yararlı Linkler

https://angular.io/guide/structural-directives

https://stackblitz.com/edit/github-uwbzob