Membuat Angular Component

by

Pendahuluan

Ide dari Angular adalah membangun web page berdasarkan component.

Sedangkan component itu sendiri adalah sebuah typescript class yang akan di instantiate oleh Angular untuk membuat object berdasarkan blue print yang dibuat.

Contoh menggunakan web skillplus, jika didevelop dengan Angular, maka kita dapat bagi menjadi component

  • Header.
  • Menu.
  • Main body.
  • Sidenbar

Membuat Component Angular

AppComponent (file app.component.ts) yang pertama kali digenerate oleh Angular adalah component khusus, karena digunakan sebagai container untuk component lainnya, dapat kita sebut sebagai root component.

Jadi dalam membuat web app menggunakan Angular, kita tidak akan menyentuh file index.html. Akan tetapi membuat component baru yang yang akan ditambahkan dalam file app.component.ts.

Mari kita buat component baru, skenarionya kita akan membuat component backend yang akan menampilkan informasi server.

Buat folder baru, pada tutorial digunakan /src/app/server. (Adalah suatu kebiasaan yang baik dengan meng-organisir component dalam folder terpisah dan memberi nama folder sesuai dengan nama component).

Pada folder tersebut, tambahkan file baru server.component.ts (disarankan menggunakan konvensi namaComponent.component.ts, agar kita lebih mudah memahami isi file).

Sekarang kita siap membuat component baru. Masukan script dibawah:

//file src/app/server/server.component.ts

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

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html'
})
export class ServerComponent{
    servertitle = 'server component..';
 }

Pertama kita harus import library yang akan digunakan, yaitu component.

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

Untuk memberitahu Angular bahwa class yang kita buat adalah Angular component, digunakan decorator @Component.

Decorator akan berisi informasi:

  • selector, yaitu html tag custom, yang nantinya akan diinject oleh template.
  • templateUrl, berisi relative path ke file template, dalam hal ini server.component.html.

Perhatian: templateUrl adalah optional, Anda bisa menggunakan template inline, jika code template kecil.

@Component({
    selector: 'app-server',
    templateUrl: './server.component.hmtl'
})

Terakhir adalah class dari component itu sendiri. Digunakan keyword export karena akan digunakan oleh modul lain.

Pada modul ini kita hanya akan menginsialisasi variable title saja.

export class ServerComponent{

    servertitle = 'server component..';
 }

Berikutnya kita buat file template src/app/server/server.component.html.

Disini kita gunakan component yang telah dibuat, kita akses variable {{servertitle}}.

/*file: src/app/server/server.component.html*/

<p>Server Component</p>
<span>{{servertitle}}</span>

Registrasi Component

Berikutnya adalah registrasi component yang kita buat didalam AppModule. Kita akan bahas AppModule pada topik yang terpisah. Untuk saat ini, tambahkan dulu code dibawah.

Buka file src/app/app.module.ts, lalu modifikasi (lihat baris code yang diberi komentar).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
//tambahkan baris ini.
import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent //tambahkan baris ini
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Menggunakan Component

Terakhir, kita buka file src/app/app.component.html, hapus semua code yang digenerate oleh Angular. Kemudian tambahkan code berikut.

<span>{{ title }} app is running!</span>
<app-server></app-server>

Seperti yang sudah dibahas diatas, kita akan gunakan app.component sebagai root component. Oleh karena itu kita tambahkan custom tag <app-server></app-server>disini.

Testing

Jalankan ng server pada command prompt, tunggu sampai kompilasi selesai, lalu buka https://locahost:4200.

$ ng server

Membuat Component Menggunakan CLI

Selain cara manual diatas, kita bisa otomatis membuat component menggunakan CLI.

Buka command prompt baru, lalu gunakan perintah

$ ng generate component nama_component

atau

$ ng g c nama_component

Contoh digunakan nama_component adalah servers, maka

Angular CLI akan otomatis generate 4 file yang berhubungan dengan component, disimpan dalam folder servers.

Selain itu, jika Anda buka file app.module.ts, dapat dilihat Angular CLI otomatis melakukan registrasi.

Sharing is caring:

Leave a Comment