[Angular 7][4] Component

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Saturday, 09 Mar 2019

Hello world,

Pembahasan kali ini adalah tentang component. Bagian penting dari struktur Angular. Mari kita coba lihat struktur pada contoh app.component.ts.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'namaweb';
}

Dari contoh di atas yang saya beri tanda dengan warna biru adalah Class (yang berisi property title). Lalu yang berwarna merah adalah metadata yang berjenis Decorator (pembahasan lebih jelas mungkin akan dibahas pada post terpisah). Lalu di dalam decorator ada selector yang berisi 'app-root'. Fungsinya adalah sebagai tempat menampilkan view/template website kita. Kalau kita buka file index.html maka di sana akan ada satu baris tag yaitu . Selanjutnya ada templateUrl yang merupakan file html yang akan menjadi halaman web yang ingin ditampilkan pada app-root. Begitu pula dengan styleUrls

Lalu bagaimana cara membuat component baru? Saat pertama kali membuat project maka akan default terbentuk component utama bernama app.component. Selebihnya kita harus buat sendiri component lain yang dibutuhkan jika ingin membuat halaman lain. Caranya adalah dengan menjalankan command di bawah ini melalui cmd atau pada terminal VS Code.

ng g c namacomponent

Penjelasan :

g = generate

c = component

namacomponent = bisa diisi sesuai nama yang diinginkan.

Setelah kita klik enter maka akan automatis dibuat 4 file namacomponent.component.ts, namacomponent.component.spec.ts, namacomponent.component.html, namacomponent.component.css di dalam sebuah folder bernama namacomponent. Selain itu dalam file app.module.ts akan diperbaharui dengan penambahan import dan declaration baru sesuai namacomponent. 

Selanjutnya akan berlanjut pada pembahasan mengenai routing yang akan saya bahas di post selanjutnya.

Selamat mencoba :)