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

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, ...

EJSC, co-working space kekinian di Jawa Timur

Dalam rangka memanfaatkan momen cuti lebaran 2023 agar tetap produktif saya menyempatkan diri  mampir ke salah satu co-working space di daerah Pamekasan, Madura. Awalnya cukup surprised ketika googling dan menemukan EJSC ini, sangat tidak menyangka kalau di kota kecil di Provinsi Jawa Timur ini sudah tersedia co-working space yang dapat digunakan oleh siapa saja dengan fasilitas yang lumayan lengkap. Lokasinya sendiri berada di Gedung Karesidenan Kota Pamekasan, persis di seberang alun-alun kota yang lebih dikenal dengan sebutan Arek Lancor. image source: google Berikut ini beberapa kesan positif yang dapat saya simpulkan selama menggunakan co-working space ini dua hari berturut-turut: Akses yang Mudah Ga perlu muter-muter untuk bisa menemukan tempat ini, apalagi sampai nyasar. Google Maps offline? bisa tanya ke warga setempat, pasti rata-rata tahu dimana gedung karesidenan berada. Parkiran Luas Parkiran baik untuk roda empat ataupun roda dua tersedia di halaman depan gedung, wakt...

Akselerasi minimum tapi konsisten

Sama halnya dengan perlombaan lari kita tidak mungkin dapat begitu saja mencapai kecepatan maksimum begitu mendengar aba-aba"ya" atau letusan pistol, semua butuh proses. Dalam programming pun demikian, jangan pernah berharap bahwa setelah  langkah pertama selanjutnya akan mulus tanpa rintangan, justru sebaliknya titik paling sulit, rumit, berdarah-darah dan butuh kesabaran ekstra ada pada fase ini. Tidak heran jika banyak sekali kita temui beberapa orang menyerah dan memilih untuk putar arah karena merasa dirinya berada di jalan yang salah. saya tidak berbakat untuk menjadi seorang programmer - by anonymous.  Saya berani bertaruh kalau semua programmer hebat yang kita temui pernah menghadapi hal yang sama, bedanya? mereka tidak menyerah dan secara konsisten melakukan perbaikan (remedial) dan mempelajari hal baru setiap harinya. Stuck ? itu hanya sementara, lambat laun jawaban akan didapati jika terus mencari. Fase ini memang berat tapi sangat krusial, para programmer ...