Merhabalar.

Bu yazıda Structural Directives konusunu öğreneceğiz.

Angular 2 içerisinde 3 adet directive tipi vardır. Bunlardan birisi daha önce öğrendiğimiz ve öğrenmeye devam ettiğimiz Component konusu idi. İkincisi ise bu yazıda öğreneceğimiz Structural Directives olacak. Üçüncüsü ise Attribute Directives ve onu gelecek yazılarda öğreneceğiz.

Structural Directives dediğimiz yapı Angular 2 içeirsinde DOM manipulation yapılmasından sorumlu olan bir yapıdır. Biz bu yazı içerisinde Structural Directive’in 3 parçasını göreceğiz. Bunlar:

• ngIf
• ngSwitch
• ngFor

Şimdi ngIf konusuna değinelim. ngIf directive’i isminden de anlaşılabileceği gibi sayfamızda belirli şartlara göre bir akış sağlamamıza yarayan bir directive’dir. Basit bir örnekle pratiğe dökelim:

import {Component} from '@angular/core';

@Component({
    selector : 'angular2Tutorials',
    template : `<h2>{{title}}</h2>
                <p *ngIf="showElement">Show Element</p>`,
})

export class Angular2Tutorials{
    public title = "Angular 2 Tutorials";
    public showElement = false;
}

Component’imizin template özelliği içerisinde bir p tag’i tanımlı. Bu p tag’inde *ngIf ifadesi ile p tag’inin görünür olup olamayacağına karar veriliyor. *ngIf özelliğine ise class içerisinde tanımlı showElement nesnesi atanıyor. *ngIf özelliği bu element’in değerine göre p tag’inin görünür ya da görünür olmama durumuna karar verecek.

Anasayfayı çalıştırdığımızda şu şekilde bir ekran çıktısı geliyor:

Kod içerisinde showElement false olduğu için Show Element textine sahip p tag’i görünmedi. Şimdi showElement nesnesine true değer atayıp sayfayı kontrol ediyorum.

Gördüğünüz gibi p tag’i görünür oldu.

Şimdi ngSwitch konusunu işleyelim. ngSwitch konusu klasik programlama dillerinde yer alan switch-case mantığında bir yapı. Bu olursa şu olsun, şu olursa bu olsun şekilde çalışacak bir yapı ngSwitch. Yukarıdaki örneğimize eklemeler yaparak ngSwitch’i örnekleyelim.

import {Component} from '@angular/core';

@Component({
    selector : 'angular2Tutorials',
    template : `<h2>{{title}}</h2>
                <p *ngIf="showElement">Show Element</p>
                <div [ngSwitch]="color">
                    <p *ngSwitchWhen="'red'">Red paragraph is shown!</p>
                    <p *ngSwitchWhen="'blue'">Blue paragraph is shown!</p>
                    <p *ngSwitchDefault>Invalid Colour!</p>
                </div>`,
})

export class Angular2Tutorials{
    public title = "Angular 2 Tutorials";
    public showElement = true;
    public color = "red";
}

Template’mize bir div tag’i ekledik ve bu tag içerisinde köşeli parantezler arasında ngSwitch özelliğimizi kullandık. ngSwitch özelliğimize class içerisinde tanımlı color nesnesini atadık. Div tag’inin içerisinde 3 adet p tag’i kullandık ve bu p tag’lerinde ngSwitchWhen ile ngSwitchDefault kullandık. ngSwitch özelliği kendisine atanan color değerinin kontrolünü gerçekleştiriyor ve akabinde içerideki ngSwitchWhen’lere göre işlemin gerçekleştirilmesini yapıyor. Eğer gelen color’ın değeri red ise birinci p tag’i yazdırılıyor. Eğer blue ise ikinci p tag’i yazdırılıyor. Eğer red ya da blue dışında bir renk gelirse ngSwitchDefault’a yönlendiriyor ve son sıradaki p tag’i yazdırılıyor. Color nesnesini değeri red olacak şekilde gönderelim ve ekran çıktısına bakalım:

Color nesnesinin değerini red olarak gönderdik ve Red paragraph is shown! metni görüntülendi.

Şimdi color’ı blue yapıp gönderelim:

Blue paragraph is shown! metni ekranda görüntülendi.

Son olarak da color’ı green olarak gönderelim:

Gönderdiğimiz color nesnesi değeri red ya da blue olmadığı için ngSwitch işlemi ngSwitchDefault özelliği kullanılan p tag’ine yönlendirdi ve Invalid Colour! metni görüntülendi.

Şimdi bu yazımıdaki son directive’miz olan ngFor directive’ini öğrenelim. ngFor directive’de bize bir döngü döndürme imkanı sunuyor. ngFor’u örnekleyelim:

import {Component} from '@angular/core';

@Component({
    selector : 'angular2Tutorials',
    template : `<h2>{{title}}</h2>
                <p *ngIf="showElement">Show Element</p>
                <div [ngSwitch]="color">
                    <p *ngSwitchWhen="'red'">Red paragraph is shown!</p>
                    <p *ngSwitchWhen="'blue'">Blue paragraph is shown!</p>
                    <p *ngSwitchDefault>Invalid Colour!</p>
                </div>
                <ul>
                    <li *ngFor="let driver of drivers">{{driver}}</li>
                </ul>`,
})

export class Angular2Tutorials{
    public title = "Angular 2 Tutorials";
    public showElement = true;
    public color = "green";
    public drivers = ["Michael Schumacher","Mika Hakkinen","Rubens Barichello","David Coulthard"];
}

Class içerisinde bir drivers array’i tanımladık ve içerisine değerler koyduk. Template içerisinde de ul tag’i içerisinde li tag’i ile array içindeki değerleri ekrana yazdıracağız. Normalde array içinde 4 değer olduğu için ul içerisinde 4 li kullanarak yazıdrabilirdik ama ngFor sayesinde tek satırda, tek li tag’i ile işi halledeceğiz. Kod içerisinde ngFor ifadesi ile bir döngü, repeat işlemi yapılacağını söylüyoruz. ngFor’a atanan *let driver of drivers ifadesi ile klasik programlama dillerindeki forEach döngüsüne benzer şekilde drivers içinde dönerken her birini driver olarak kabul edip işlem yapacak. Ekrana yazdırma kısmında ise daha önce öğrendiğimiz interpolation devreye giriyor ve driver’ı yazdırıyoruz.

Ekran çıktımız da şu şekilde:

Gördüğümüz gibi Drivers array’i içindeki değerler ekrana yazdırıldı.

Bu yazıda anlatacaklarım da bu kadar arkadaşlar. 3 directive ifadesi ile Structural Directives konusunu öğrenmiş olduk. Gelecek yazıda görüşmek üzere.

Görüşene kadar sağlıcakla kalın.

Selam ve Sevgilerimle