Merhabalar arkadaşlar. Angular 2 yazılarına Attribute Directives konusu ile devam ediyoruz.

Bir önceki yazıda öğrendiğimiz Structural Directives konusu DOM Manipülasyonu üzerine odaklanan bir directive iken Attribute Directive ise DOM Elementinin davranışını değiştirmeye odaklanmıştır. Biz de bu yazıda Attribute Directives konusuna ait olan ngClass ve ngStyle özelliklerini öğreneceğiz.

angular2tutorials.component.ts dosyamızın içeriğini şu şekilde güncelleyelim:

import {Component} from ‘@angular/core’;

@Component({
    selector : 'angular2Tutorials',
    template : `<h2></h2>
                <p [ngClass]="{classOne:cone,classTwo:ctwo}">ngClass Paragraph</p>`,
    styles:[`.classOne{color:white}
             .classTwo{background-color:black}`]
})

export class Angular2Tutorials{
    public title = "Angular 2 Tutorials";
    public cone = true;
    public ctwo = true;
}

angular2tutorials.component.ts dosyamızda template kısmı içerisinde bir tag’i tanımladık ve bu paragraph içerisinde ngClass Paragraph yazsın dedik. p tag’inde özellik olarak ngClass kullandık ve ngClass aslında bizim HTML’den bildiğimiz class attribute’nu yönetmek için geliştirilmiş bir özellik ve class attribute’u da bildiğimiz CSS özelliğinden geiyor. Burada da ngClass atama yapabilmek için öncelikle selector gibi, template gibi styles özelliğinin tanımınınn yapılması gerekiyor.

styles özelliği içerisinde iki adet class tanımı yaptık. CSS dosyalarında ifadenin “.” ile başlaması bildiğiniz class tanımı yapıldığına işaret eder ve “.” ile başlayan classOne ve classTwo’yu yazmamız ile birlikte iki adet class özelliğini kayda geçirmiş olduk. classOne atandığını elementin rengini beyaz yaparken, classTwo arka plan rengini siyah yapmaktadır.

ngClass özelliğine geri dönersek ngClass’a atanan değer içerisinde classOne:cone ifadesi ile classOne’ın aktif olup olmamasına cone değişkeninin değeri karar verecek diyoruz. Aynı durum classTwo için de geçerli.

Angular2Tutorials class’ı içerisinde cone ve ctwo’ya true değerleri atalı. Bu iki CSS class’ının da aktif olacağı anlamına geliyor.

Şimdi anasayfamızı kontrol edelim:

Gördüğünüz gibi elementin style’ı çalışır vaziyette.

Şimdi bir butonumuz olsun ve bu buton tıklandığında yukarıdaki p tag’inin içindeki elementin style’ını değiştirsin. angular2tutorials.component.ts dosyamızı şu şekilde güncelleyelim:

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

@Component({
    selector : 'angular2Tutorials',
    template : `<h2></h2>
                <p [ngClass]="{classOne:cone,classTwo:ctwo}">ngClass Paragraph</p>
                <button (click)=toggle()>Toggle</button>`,
    styles:[`.classOne{color:white}
             .classTwo{background-color:black}`]
})

export class Angular2Tutorials{
    public title = "Angular 2 Tutorials";
    public cone = true;
    public ctwo = true;
    toggle(){
        this.cone = !this.cone;
        this.ctwo = !this.ctwo;
    }
}

Template özelliğimizin içerisinde bir button tanımladık ve click özelliğine toggle() isminde bir metot atandık yani butona tıklandığından toggle metodu çağırılacak. Class içerisinde de toggle metodumuzu tanımladık ve bu metodun işlevi cone ve ctwo değişkenlerinin değerini tersine çevirmektir.

Şimdi sayfamızı kontrol edelim:

Toggle butonumuz sayfamızda yerini aldı, şimdi butona tıklıyorum:

Gördüğünüz gibi p tag’inin style özellikleri devre dışı kaldı.

Web sayfamızdaki elementlerimize istersek class özelliği ile istersek style özelliği ile şekil verebiliyoruz. Angular içerisinde de ngClass attribute’nun yanında ngStyle attribute’unu da kullanabiliriz. Şimdi ngClass nasıl kullanılır ona bakalım, kodumuzu şu şekilde güncelleyelim:

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

@Component({
    selector : 'angular2Tutorials',
    template : `<h2></h2>
                <p [ngClass]="{classOne:cone,classTwo:ctwo}">ngClass Paragraph</p>
                <button (click)=toggle()>Toggle</button>
                <p [ngStyle]="{'font-style':style,'font-size':size}">ngStyle Paragraph</p>`,
    styles:[`.classOne{color:white}
             .classTwo{background-color:black}`]
})

export class Angular2Tutorials{
    public title = "Angular 2 Tutorials";
    public cone = true;
    public ctwo = true;
    public style = "italic";
    public size = "30px";
    toggle(){
        this.cone = !this.cone;
        this.ctwo = !this.ctwo;
    }
}

Kodumuz içerisinde template özelliği içerisinde yeni bir p tag’i tanımladık ve bu tag içerisinde HTML’den tanıdığımız style özelliğini yönetmek için geliştirilmiş ngStyle özelliğini kullandık. Angular2Tutorials sınıfı içerisinde değeri italic olan style değişkeni ve değeri 30px olan size değişkeni tanımladık.ngStyle özelliğimize atanan değer içerisinde de HTML’den tanıdığımız font-style ve font-size özelliklerini kullandık. font-style özellliğine Angular2Tutorials sınıfı içerisinde tanımlı style değişkenini atadık ve font-size özelliğine de size değişkenini atadık.

Sayfamıza gittiğimiz zaman yeni p tag’imizi görüyoruz ve öğeyi incelediğimizde style özelliğine bizim değerlerimizin atanmış olduğunu görüyoruz.

Bu yazıda anlatacaklarım da bu kadar arkadaşlar. Attribute Directives konusunu da böylece öğrenmiş olduk. Gelecek yazıda görüşmek üzere.

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

Selam ve Sevgilerimle