Menggunakan Style Pada Angular Component

by

Style pada Angular dapat digunakan secara global, atau dapat di overide pada level component.

Seperti yang sudah dibahas pada modul instalasi CSS Framework, pada project digunakan Bootstrap.

Sama seperti HTML template, style pada component diatur melalui decorator @Component terdapat dua pendekatan, yaitu:

  • Inline Styling: menggunakan property styles, digunakan jika rule css pendek.
  • External Styling: menggunakan property styleUrl, berupa relative path terhadap component.css file.

Untuk lebih jelas, kita buka file app.component.html, lalu ubah menjadi code seperti berikut.

/*file: app.component.html*/
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>APP Component</h1>
            <hr>
            <app-server></app-server>
        </div>
    </div>
</div>

Jika Anda jalankan, warna teks tag H1 dari bootstrap adalah hitam. Kita dapat ubah pada level component.

Cara External Style

Buka file app.component.css, lalu masukan rule css, misalnya ubah warna H1 menjadi biru.

/* file: app.component.css */
h1{color: blue;}

Kemudian buka file app.component.ts, lalu pada decorator tambahkan link ke file css (bila belum Ada, seharusnya sudah tersedia karena app.component adalah component hasil generate Angular).

Lihat property styleUrls, menerima input list of string. Jadi kita bisa gunakan beberapa file css.

//file: app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular Apps';
}

Cara Inline Style

Masih pada file app.component.ts, ubah property styleUrls menjad styles. Kemudian masukan css rule disana.

Property style juga menerima list of string, jadi bisa dimasukan beberapa rule css. Atau Anda dapat menggunakan multiline string dengan back-tick (`css rule goes here`).

//file: app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [
    `h1{color:red}`
  ]
})
export class AppComponent {
  title = 'My Angular Apps';
}

JIka Anda jalankan, gambar 1, H1 dioverirde pada external file, sementara pada gambar 2, H1 dioverirde melalui inline css.

Sharing is caring:

Leave a Comment