Membuat Component Pada Angular 4 Dengan CLI

Posted on

Di panduan kali ini saya akan memberikan bahan mengenai ANGULAR 4 yaitu mengenai Membangun Component Di Anular 4 Dengan CLI,  baikah sebelum kita memulai membatnya untuk yang belum tahu mengenai apa itu component di angular saya akan memberikan penjelasan singkat.

Untuk yang pernah mencoba angular js dengan pola MVCnya, karenanya mulai dari versi angular 2 hingga yang kini yaitu yang ke 4 menggunakan pola component based atau dapat di bilang tak lagi menggunakan MVC .

Karena angular 2 hingga 4 menggunakan typescript karenanya kamu akanmenemukan file yang berekstensikan .ts bagi setiap komponen yang di bikin.

Component di struktur project :

Contoh Component Di Angular 4

Di bawah ini yaitu contoh component yang saya copy di  angular 4 yaitu app.component.ts :

1. Component Import

Cara Kamu merancang kelas menjadi komponen yaitu dengan mengimpor anggota Component from the @angular/core library. Beberapa komponen mungkin mempunyai puluhan impor menurut keperluan komponen.  kapanpun kamu mengimport  service lainya komponentnya pun dapat menggunkan dependency injection.

 

2. Component Decorator

Bagian berikutnya yaitu apa yang dikenal selaku Component Decorator.  Pada komponen, Kamu mempunyai beraneka properti konfigurasi yang menolong menentukan komponen yang diberikan .

Selector: Ini yaitu nama tag yang digunakan komponennya. Misalnya: <app-root> Mengandung … </ app-root> di pada index.html.
TemplateUrl & styleUrls: Ini menentukan tampilan HTML dan stylesheet yang terkait dengan komponen ini. Kamu pun dapat menggunakan tampilan dan style properties bagi mendefinisikan inline HTML dan CSS. Ada properti lain yang dapat Kamu tentukan di pada komponen dekorator tergantung di keperluan komponen Kamu. Ini pun di mana Kamu mendefinisikan animasi

3. Component Class

Akhirnya, kita mempunyai inti komponen, yaitu kelas komponen.

Di sinilah beraneka sifat dan cara didefinisikan. Setiap properti dan cara yang didefinisikan di sini dapat diakses dari tampilan. Dan pun, kejadian yang terjadi di tampilan dapat diakses di pada komponen.

Ini pun dimana dependecy injectio  terjadi di pada konstruktor, yang memberi Kamu akses ke beraneka layanan.

BAiklah teman-teman Mari kita bikin komponen kita sendiri dengan bantuan CLI

4. Membangun Component Sendiri Dengan Bantuan CLI

Bagi my-new-component yaitu nama component dan dapat di ganti dengan nama yang sesuai keperluan kamu, apabila berhasil karenanya di terminal akan muncul pemberitahuan seperti berikut :

Di gambar di atas saya membbuat component dengan nama post.

Bailah hingga di sini dulu artikel tentang Membangun Component Di Anular 4 Dengan CLI, hingga bertamu di artikel angular berikutnya

 

sumber :kursuswebprogramming.com/blog/

(Visited 2 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *