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>
<input type="text" [(ngModel)]="serverName">
<p>Server Name is : {{serverName}}</p>
<p *ngIf="serverName">Server Name is :{{serverName}}</p>
<p *ngIf="serverName else noServer;">Server Name is :{{serverName}}</p>
<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.