Angular Component'ine css eklemek

Önceki uygulamada Angular'da nasıl component ekleyebileceğimizi ii farklı yoldan göstermiştim. Şimdi eklediğimiz component'e biraz css ekleyerek görsellik katalım.

Angular'da harici css dosyaları kullanabildiğimiz gibi inline css yazmak da mümkün. Harici css yazmak için,

app.component.css dosyasını açalım ve içerisine;

h5 {color: blue;}

Satırını ekleyelim. Şimdi de html kodlarımızı yazdığımız app.component.html dosyasını açalım ve aşağıdaki gibi düzenleyelim;

<div class="row">
    <div class="col-md-6"><h5>Merhaba</h5></div>
    <div class="col-md-6">Reitix</div>
</div>

h5 etiketine sahip olan Merhaba yazısının maviye döndüğünü görebiliriz.

Şimdi de bir inline css yazarak Reitix yazısını kırmızı renkte yazdıralım.

app.component.html dosyasını açalım ve Reitix yazısını daha rahat seçebilmek için etiketi h4 olarak değiştirelim.

<div class="container">
    <div class="row">
        <div class="col-md-6"><h5>Merhaba</h5></div>
        <div class="col-md-6"><h4>Reitix</h4></div>
    </div>
</div>

Şimdi de inline css kodu yazacağımız app.component.ts dosyasını açalım ve kodlarımızı yazalım:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  styles: ['h4 {color:red}']
})
export class AppComponent {
}