Angular içerisinde directive(karar mekanizmaları olarak düşünebiliriz) çok önemlidir. Burada html içerisindeki bir elementi göstereceğimiz ya da göstermeyeceğimize karar verir ona sonucuna göre çalışma zamanında aktif olarak DOM‘ u manipule edebiliriz. Bunun neticesinde sayfa kaynağı görüntüle yaptığımızda aslında var olmayan bir elementi çalışma zamanında ekleyebiliriz. Şimdi bunun nasıl yapıldığını basit örneklerle anlatayım.

Örnek verelim ki bir sayfamız var ve içerisinde server ın durumunu kontrol ediyoruz. Server yüklü olduğundan server ismini ekrana basmak istiyoruz Fakat bununla beraber server olmadığında noServer mesajı vermek istiyoruz.

Bunu yapmak için öncelikle basitten giderek bir input parametresi ile server ismini alacağım. Bunun için,
<input type="text" [(ngModel)]="serverName">
<p>{{serverName}}</p>

kodlarını kullanıyorum. Fakat bu işlem bana sayfada yalnızca server ismini dönecek olmadığında ise “” boş string olarak kalacak. O sebeple ilk adım olarak bunun bir server ismi olduğunun açıklamasını  ekliyorum.
<input type="text" [(ngModel)]="serverName"> 
<p>Server Name is : {{serverName}}</p>
Şimdi belli oluyor fakat henüz sayfada birşeyler girmemişken bize böyle bir görüntü sunacak ,
biz ise bunu istemiyoruz. Server olmadığında en azından Server Name is : yazmasın. Bunun için ngIf kullanıyorum.
P tagı içerisinde yıldız ile,

<p *ngIf="serverName">Server Name is :{{serverName}}</p>

dikkat edilmesi gereken husus başında yıldız(*) olması. Bunun anlamı ngIf direktifinin “ structural directive  ” pozisyonunda olmasıdır. Yani çalışma anında DOM elementini manipule etmesidir.
Bu noktadan sonra web sayfam, 
halini aldı şimdi server yüklenmeme durumu yani else durumunu ng-template konusuna giriş olarak verebiliriz. ngIf ile kontrol ettiğim element True değilse else bloğuna girer .

<p *ngIf="serverName else noServer;">Server Name is :{{serverName}}</p>

şimdilik server olmadığında yeni bir elementi true konumuna çekiyorum. Ve ardından bu elementi ng- template içinde çağırak kullanıyorum.

<p *ngIf="serverName else noServer;">Server Name is :{{serverName}}</p>
<ng-template #noServer ><p>no Server was Created</p></ng-template>

 

Buraya kadar basitce,

ngIf ‘ in bir structural directive olduğunu bu yüzden başında yıldızla kullanılması gerektiği ve çalışma anında DOM manipule edebildiiğini ,

ngIf durumunun yanında else durumuna da ihtiyacımız olursa bunu aynı şekilde else yazarak devam ettiğimizi ve yeni bir elemente değer assign ettimizi,

ve bu değeri de ng-template yapısı içerisinde kullandığımızı özetledim.

Ek olarak çalışma anında nasıl değiştirdiğine dair kısa bir örnek ile bitireyim,

 

Ve Server Name oluşturulduğunda ise (aşağıda)Sayfanın İçeriği bu şekilde değişmektedir. Yani çalışma anında web sayfasının içerdiği kod satırlarını değiştirmiştir.