Angular 2 Ders 3 - Component'e Style Atanması

Merhabalar arkadaşlar. http://ilkaygunel.com/blog/2017/angular-2-lesson-2-create-component/ yazımızda kendi Component’imizi oluşturmayı ve AppComponent içinden onu ekranda göstermeyi görmüştük. Bu yazıda ise bu kendi oluşturduğumuz Component’e Style ataması yapacağız.

Github üzerinden direk Angular 2 çalışmaya başlamak için edindiğimiz bir Template projemiz vardı ve biz onu kullanıyorduk. O proje içerisinde style.css adında ve index.html içinde kullanılan bir dosyamız vardı. O dosyayı editörünüz üzerinde açınız.

Bir önceki yazıda yazdığımız Angular2Tutorials component’imiz şu şekilde idi:

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

@Component({
    selector : 'angular2Tutorials',
    template : '<h2>Angular 2 Tutorials</h2>'
})

export class Angular2Tutorials{}

Şimdi bu Component’imizin template kısmında bir de h4 tag’ini kullanalım ve bu h4 tag’ine style ataması yapalım.

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

@Component({
    selector : 'angular2Tutorials',
    template : `<h2>Angular 2 Tutorials</h2>
                <h4>Header 4 From Angular 2 Tutorials</h4>`,
    styles: [`h4{
        color:red;
    }`]
})

export class Angular2Tutorials{}

Angular2Tutorials component’imizin template özelliği içerisinde tek tırnaklar arasında olan Template özelliğini yan tırnaklar arasına aldık ( ).
h4 HTML tag’i ile bir metin tanımladık.
Bir component’e style özelliği atamak istediğimiz zaman @Component içerisinde onun styles özelliğinden faydalanıyoruz. Bu özelliğe değer atandığı kısımda ise hangi tag’in style özelliği ile oynanmak isteniyorsa ona uygun değer ataması yapıyoruz. Bizim örneğimizde h4 HTML tag’inin rengi kırmızı olacak şekilde ayarlandı.

Sunucu çalışmıyorsa npm start verdikten sonra, çalışıyor ise tarayıcıya direk gidip baktığımızda bu Component içerisinde h4’e kırmızı rengin atandığını göreceğiz.

Burada şunu unutmamak lazım ki bizim buradaki h4 tag’ine atadığımız style özelliği sadece bu Component’i kapsar. Yani başka Component’ler içerisinde de h4 kullanılırsa buradaki style özelliği etkili olmayacak. Hemen bu durumu ispatlayalım.

app.component.ts dosyamız içerisinde şu şekilde düzenlemeye gidelim:

import { Component } from '@angular/core';
import {Angular2Tutorials} from './angular2tutorials.component';

@Component({
  selector: 'my-app',
  template: `<h1>Hello World</h1>
              <angular2Tutorials></angular2Tutorials>
              <h4>Header 4 From App Component</h4>`,
  styles: [`h4{
        color:blue;
    }`],            
  directives:[Angular2Tutorials]
})
export class AppComponent { }

AppComponent içerisinde Angular2Tutorials içinde yaptığımız gibi template kısmında h4 tag’ini kullandık ve styles özelliği kısmında h4 tag’ine mavi renk ataması yaptık.

Ekran çıktısında gördüğümüz gibi Angular2Tutorials component’i içinden h4 kırmızı renkte iken AppComponent içinden gelen h4 mavi renkte.

Son olarak da index.html içinde bir h4 tag’i kullanalım ve style.css dosyası içerisinde buna özel tanımlama yapalım.

style.css dosyamız içerisinde şu satırları ekleyelim ve HTML içinde h4 tag’ini kullandığımızda rengi turuncu olsun:

h4{
  color: orange;
}

index.html dosyamızın body kısmını da şu şekilde değiştirelim ve bir h4 tag’i de HTML içinde kullanmış olalım:

<body>
	<h4>Header 4 From index.html</h4>
	<my-app>Loading...</my-app>
</body>

Ekran çıktısında gördüğümüz gibi her h4 tag’i kendisine nerede bir style özelliği atanmışsa oradakini kullandı.

İlk h4 tag’i style.css içerisinde tanımlı rengini aldı çünkü index.html dosyası içerisinde doğrudan gelen (Component’ler içerisinden gelmeyen) tagler özelleliklerini style.css’den alıyor.
İkinci h4 tag’i Angular2Tutorials Component’i içerisinde tanımlı rengini aldı.
Üçüncü h4 tag’i de AppComponent içerisinde tanımlı rengini aldı.

Bu yazıda anlatacaklarım da bu kadar arkadaşlar. Oluşturulan Component’e style atanması durumunu basitçe görmüş olduk. Gelecek yazıda görüşmek üzere.

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

Selam ve Sevgilerimle