Tutorial Angular Bagian 3: Membuat dan Mengubah Style Component

Component merupakan bagian terpenting dari Angular untuk menghasilkan blok-blok HTML yang membentuk suatu halaman. Masing-masing component dapat berdiri sendiri atau menjadi sub component dari component lain (biasa disebut dengan child component) dan bisa digunakan berulangkali di halaman yang berbeda (reusable).

Secara garis besar Angular component terdiri atas:

• HTML template untuk menampilkan HTML objek kepada pengguna
• Typescript class, digunakan untuk menulis logika aplikasi ataupun behaviour dari component tersebut
• CSS untuk mengubah style/tampilan component

Membuat Component

Cara yang paling mudah untuk membuat component adalah dengan Angular CLI, buka terminal dan pastikan Anda sudah berada di dalam direktori aplikasi Angular lalu jalankan perintah berikut:

ng generate component hello-world

Perintah di atas secara otomatis akan membuat folder dengan nama hello-world (src/app/hello-world) dan di dalam folder tersebut Anda akan menemukan file:

• hello-world.component.ts, merupakan typescript class HelloWorldComponent
• hello-world.component.html, merupakan template HTML dimana kita dapat membuat object HTML
• hello-world.component.css, merupakan file css yang berisi style dari component tersebut
• hello-world.component.spec.ts, merupakan file yang digunakan untuk keperluan testing

Perlu diingat bahwa hello-world diatas adalah nama dari component yang dibuat, jadi setiap kali Anda menjalankan perintah generate component maka semua file yang terbentuk akan mengikuti nama component.

Component Selector

Selector adalah identifier dari component yang digunakan oleh Angular untuk membuat instance dari component tersebut dan menampilkan HTML template-nya di dalam browser pengguna. Sebagai contoh, component hello-world yang Anda buat sebelumnya akan memiliki selector app-hello-world dan ketika selector ini dipanggil maka object HTML di dalam file hello-world.component.html akan ditampilkan oleh browser.

//file src/app/hello-world/hello-world.component.ts 
@Component({
   selector: 'app-hello-world',
})

HTML Template

Template adalah blok kode HTML yang akan ditampilkan pada browser, ada dua cara untuk mendefinisikan template yaitu:

Inline

Blok HTML ditulis di dalam file component menggunakan properti template.

//file src/app/hello-world/hello-world.component.ts 
@Component({
   selector: 'app-hello-world',
   template: '<h1>Hello World</h1>'
})

Jika blok HTML terdiri dari dua baris atau lebih maka bisa menggunakan backticks (`)

//file src/app/hello-world/hello-world.component.ts 
@Component({
  selector: 'app-hello-world',
  template: `
    <h1>Hello World</h1>
    <p>Ini object baris kedua</p>
  `
})

External Reference

Blok HTML berada di file yang terpisah dan ditunjukkan oleh properti templateUrl, dalam contoh ini adalah hello-world.component.html.

//file src/app/hello-world/hello-world.component.ts
@Component({
   selector: 'app-hello-world',
   templateUrl: 'hello-world.component.html'
})

//file src/app/hello-world/hello-world.component.html 
<h1>Hello World</h1>

Mengubah Style Component

Sama halnya dengan styling HTML pada umumnya, kita bisa mengubah style component menggunakan syntax CSS. Style dapat didefinisikan hanya untuk component tersebut atau child component. Component style juga dapat dibuat secara inline atau dengan menggunakan external reference.

Inline

Kode CSS ditulis di dalam file component menggunakan properti styles.

//file src/app/hello-world/hello-world.component.ts
@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styles: ['h1 { color: red; }']
})

External Reference

Kode CSS berada di file yang terpisah dan ditunjukkan oleh properti styleUrls, dalam contoh ini adalah hello-world.component.css.

//file src/app/hello-world/hello-world.component.ts
@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})

//file src/app/hello-world/hello-world.component.css
h1 {color: red}

Global Style

Bagaimana jika kita membutuhkan kode css yang dipakai secara global di seluruh halaman? misalnya font type untuk tag <h1> menggunakan times new roman. Secara default angular CLI menyediakan file css khusus untuk keperluan ini yaitu src/styles.css, namun jika Anda ingin menggunakan file sendiri maka bisa menambahkannya di dalam file angular.json

...
"projects": {
  "appku": {
    ...
    "architect": {
      "build": {
         ...
         "options": {
           ...
           "styles": [
             "src/my-custom-style.css"
           ]
         }
       }
    }
  }
}