Angular 4 : Membuat Component
Assalamualaikum Wr. Wb
Pada kesempatan kali ini, penulis ingin membagikan pengetahuan apakah yang dimaksudkan dari “Component” pada Angular 4, dan cara menggunakannya.
Apa itu Component ?
Menurut Kamus Besar Bahasa Indonesia, yang dimaksud dari komponen adalah bagian dari keseluruhan; unsur
Jadi, menurut pemahaman penulis, Komponen pada Angular merupakan bagian-bagian kecil dari keselurahan aplikasi. Misal pada aplikasi chat terdapat komponent form, button, box-chat, balon chat, dsb tergantung bagaimana anda membagi menjadi kepingan-kepingan dari suatu aplikasi utuh.
Untuk membuat komponent pada Angular, dengan menggunakan angular-cli, adalah sebagai berikut :
Pertama, buka terminal/command prompt anda. arahkan pada folder dimana project Angular berada. eksekusi perintah :
ng g component <nama_component>
ganti <nama_component> sesuai dengan keinginan anda. pada kali ini penulis mencoba membuat komponen dengan nama example.
Kedua, supaya dapat digunakan, setelah file berhasil digenerate, class tersebut haruslah didaftar pada module, pada kali ini file example.component akan penulis daftarkan di app.module.ts.
Import Komponen Example, kemudian masukkan ke dalam @NgModule() dengan attribute decalarations.
Ketiga, untuk menggunakannya pun cukup mudah. Pada kasus ini, penulis ingin menggunakan Komponen Example, ke dalam AppComponent. Langkahnya adalah sebagai berikut :
- Masuk ke dalam komponen AppComponent.
- Gunakan component dengan sesuai tag selector yang ada di ComponentExample pada template/templateUrl AppComponent.
Keempat, jalankan aplikasi.
ng serve
Ketika anda membuka aplikasi, maka akan terlihat :
Tulisan “app works!” merupakan template dari AppComponent, sedangkan “example works!” merupakan template dari ExampleComponent.
Berikut yang dapat penulis sampaikan. Untuk source code, dapat anda lihat di repo “GitHub” penulis.
Terima Kasih.
Wassalamu’alaikum Wr. Wb
