Langsung ke konten utama

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"
           ]
         }
       }
    }
  }
}

Komentar

Postingan populer dari blog ini

Mempelajari bahasa pemograman PHP itu buang-buang waktu!

Begitulah kurang lebih maksud dari postingan di group facebook yang saya baca, sambil geleng-geleng kepala dan berucap dalam hati " what the heck you are talking about man !". Tapi tanpa kita sadari ada banyak orang yang sepemikiran dengan si empunya post , mereka menganggap PHP itu adalah sebuah bahasa yang sangat tidak keren, tidak canggih, tidak safe,  terlalu banyak garbage collection sehingga ga well   perform. Saya jadi teringat beberapa waktu yang lalu ketika menghadiri sebuah konferensi teknologi di Jakarta, statement dari seorang IT Manager sebuah perusahaan yang bergerak di industri keuangan " we are not doing PHP here, and will never be while I'm still here " rasanya kembali menegaskan bagaimana bahasa pemograman ini dipandang sebelah mata dan kerap menjadi second citizen. Well, with all due respect.. tidak ada yang salah dengan penilaian tersebut, apalagi jika disampaikan dengan data dan fakta plus experience. Tidak bisa kita pungkiri PHP mem

Tutorial Angular Bagian 2: Instalasi dan Konfigurasi

Menginstall dan memulai sebuah project dengan Angular dapat dilakukan hanya dengan beberapa langkah saja karena Angular sudah menyediakan CLI ( command line interface ) yang membuat pekerjaan menjadi jauh lebih mudah. Anda tidak perlu repot-repot membuat atau meng copy-paste  file yang dibutuhkan tapi cukup dengan menjalankan perintah di terminal/ command prompt  maka file yang Anda inginkan akan otomatis terbentuk. Adapun sebelum bekerja dengan Angular, sangat disarankan sekali bagi Anda untuk memiliki pengetahuan dasar mengenai HTML, CSS dan javascript. Hal ini dapat membantu Anda lebih mudah memahami keseluruhan materi dari tutorial ini maupun tutorial lainnya yang berkaitan dengan Angular. Pre Requisite Sebelum memulai project dengan Angular pastikan di komputer/laptop Anda sudah terinstall  NodeJS  dan  NPM . Saya tidak akan menjelaskan detail step-by-step instalasi NodeJS dan NPM pada tutorial ini karena dapat Anda temukan secara mandiri di Google, namun saya sarankan untu