Belajar Angular – Bagian 2 – Membuat Komponen

Belajar Angular - Bagian 2 - Membuat Komponen
Belajar Angular – Bagian 2 – Membuat Komponen

Belajar Angular – Bagian 2 – Membuat Komponen – Angular merupakan framework yang memiliki konsep Component Based seperti beberapa framework javascript modern lainnya, jadi salah satu yang perlu kita pelajari adalah bagaimana membuat komponen di Angular.

Tulisan ini merupakan serial pembahasan mengenai framework Angular, Anda mungkin ingin membaca tulisan lainnya berikut :

  1. Bagian 1 – Pengenalan dan Inisialisasi Project
  2. Bagian 2 – Membuat Komponen
  3. Bagian 3 – Membuat Service
  4. Bagian 4 – Membuat Route
  5. Bagian 5 – Membuat Custom Pipe atau Filter
  6. Bagian 6 – Persiapan File Production

Pertama yang mesti diperhatikan adalah bagaimana cara Angular-CLI membuatkan file Component pertama, seperti disebutkan sebelumnya bahwa Angula-CLI bisa men-generate kan kita skeleton untuk aplikasi Angular termasuk juga dengan component pertama atau component root dari aplikasi Angular.
Angular-CLI akan men generate file app.module.ts, app.component.ts, app.component.html, app.component.css dan app.component.spec.ts. Kita abaikan file terakhir dulu karena ini merupakan file untuk melakukan testing pada component tersebut. kita perhatikan dulu file app.module.ts, file tersebut berisi kurang lebih :

File ini merupakan pendefinisian atau peng-inisialan dari seluruh component, service provider, filter, dan berbagai depedency lainnya yang akan digunakan dalam aplikasi kita. Bisa kita lihat ada line yang meng-inisialisasi component kita yakni import { AppComponent } from './app.component'; kemudian di lakukan Bootstrap-ing atau menempelkan kedalam aplikasi dengan bootstrap: [AppComponent], Perlu diketahui bahwa cukupp component yang berperan sebagai root yang akan di bootstrap jadi component dibawahnya tidak perlu lagi kita bootstrap lagi.
Setelah itu kita coba lihat apa isi file app.component.ts, kurang lebih seperti berikut :

Yang perlu diperhatikan mungkin bagian selector: 'app-root' yakni id dari DOM yang akan di inject oleh component root ini, setelahnya ada bagian templateUrl: './app.component.html' yang merupakan template yang menjadi view dari component kita, dan bagian styleUrls: ['./app.component.css'] merupakan array css yang diinclude sebagai style dari component.

Setelah mempelajari file yang digenerate oleh Angular-CLI, maka kita coba buat component kita sendiri berdasarkan contoh yang diberikan oleh Angular-CLI, berikut kurang lebih langkah-langkahnya :
Pertama kita akan buat file component kita, katakanlah saya ingin membuat component HeaderBlock dan saya akan membuat file dengan nama header.component.ts di dalam folder src/app/Header/ yang isinya kurang lebih seperti ini :

Dengan file header.component.html yang isinya kurang lebih :

Karena saya tidak menggunakan CSS yang spesial di component ini, jadi bagian styleUrls :
['./app.component.css']
saya hilangkan saja. Hampir sama dengan code yang di generate oleh Angular-CLI kan ? nah ayo kita coba buat beda sedikit, kita buat template html nya inline di dalam file component saja karena isinya juga tidak terlalu banyak, jadi bisa kita hilangkan file header.component.html nantinya. Berikut kurang lebih isi file nya setelah diubah :

Kita mengganti tempalateUrl dengan tempalate dan mengisinya dengan block html yang diapit dengan backtick ` sebagai inline html.

Setelah membuat file header.component.ts, kita akan coba memanggil component tersebut di root component kita dengan mengganti isi template file app.component.html dengan kode :

Dan sentuhan terakhir namun paling penting adalah mendaftarkan component ini di app.module.ts sehingga menjadi seperti berikut :

Dan selesai lah component yang kita buat.
Oh iya saya menggunakan external CSS, jadi Anda perlu menambahkan line berikut ini di src/index.html :

Semua langkah diatas sebenarnya sudah di otomatisasi oleh Angular-CLI dengan perintah :

Kode yang digunakan dalam tutorial ini diambil dari repository https://github.com/mazipan/ng2-starwars dan bisa dilihat demo nya di : http://mazipan.github.io/ng2-starwars/.
Silahkan dipelajari source code nya.

Demikian sekilas pembahasan awal mengenai framework Angular, semoga bermanfaat tulisan yang tidak seberapa ini.
Ditulis oleh Irfan Maulana.
Salam.